Wie vergrößere ich die Suchleiste?

Dies ist der Code, den ich bisher habe und ich möchte wissen, wie man die Suchleiste an die Navigationsleiste anpassen kann. Hilfe, bitte und tut mir leid, ich bin nicht wirklich gut in der Codierung das ist für eine Informationstechnologie-Klasse, die ich nehme.Wie vergrößere ich die Suchleiste?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #8A1414; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 30px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #111; 
} 

</style> 
</head> 
<body> 

<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">Movies</a></li> 
    <li><a href="#contact">TV</a></li> 
    <li><a href="#about">About</a></li> 
    <input id="search-bar" name="search" type="text" placeholder="Search..."> 
    <input id="search-button" name="search_submit" type="submit" value="Search"> 
</ul> 
</body>

Quelle

2016-05-09 Selina Delgado

Ihr HTML ist ungültig. Sie können nur "li" als Kinder einer "ul" haben. ** Validiere deinen Code! ** –

Ist das, was Sie Setzen Sie in Ihrem CSS-Code dieser wollen: ungültig

input#search-bar { 
margin-top: 10px; 
}

Quelle

2016-05-09 15:50:06

Ihre HTML ist. Sie können nur li als Kinder eines ul

haben Also müssen wir einige Änderungen vornehmen.

Ich würde vorschlagen, so etwas wie:

Wir nehmen die Sucheingaben aus dem ul wo sie nicht gehören. Wickeln Sie diese in ihr eigenes div und schweben Sie das nach rechts.

Wickeln Sie die ganze Menge (ul und suchen div) in einem nav Element.

Setzen Sie den search Eingang auf display:inline-block und wenden Sie dann eine beliebige Breite an.

Codepen Demo

nav { 
 
    background-color: #8A1414; 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 30px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
} 
 
.search { 
 
    float: right; 
 
    padding: 14px 0; 
 
} 
 
.search #search-bar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    /* your width here */ 
 
    /* 100px for SO Snippet only */ 
 
}

<nav> 
 
    <ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">Movies</a> 
 
    </li> 
 
    <li><a href="#contact">TV</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 

 
    </ul> 
 
    <div class="search"> 
 
    <input id="search-bar" name="search" type="text" placeholder="Search..."> 
 
    <input id="search-button" name="search_submit" type="submit" value="Search"> 
 
    </div> 
 
</nav>

Quelle

2016-05-09 15:55:00

Wenn Sie die Breite einstellen möchten erhöhen setzen diese in der CSS/Style-Tag

#search-bar{ width: 300px }

Sie können die Werte nach Ihren preferance zwicken .

Wenn Sie Suchleiste im Layout richtig einstellen möchten, kann ich folgende Eigenschaften vorschlagen und Sie können auch ihre Werte optimieren.

#search-bar{ 
      width: 300px; 
      height: 20px; 
      margin-top: 10px; 
      margin-left: 600px; 
      }

sollten Sie besuchen w3c Webseite der Schule für ein besseres Verständnis von CSS und HTML.

Quelle

2016-05-09 15:59:22 Rusty

Du kannst Floats auch verwenden, aber das hängt von deinem Verständnis ab. – Rusty

Wie vergrößere ich die Suchleiste?

Antwort

Verwandte Themen