Navigationsleiste und Suchfeld inline

Question

Wie kann ich horizontale Navigationsleiste und Suchfeld in einer Zeile in der Mitte der Seite zusammen erstellen? Ich verwende text-align center, um die Navigationsleiste in der Mitte der Seite zu platzieren, aber wenn ich float verwende, um das Suchfeld neben nav zu platzieren, schwebt das ganze nav nach links.

body { 
 
    background-color: #C0C0C0; 
 
    margin: 0px; 
 
} 
 
.nav { 
 
    text-align: center; 
 
    list-style: none; 
 
} 
 
.nav li { 
 
    display: inline; 
 
    float: left; 
 
}

<div id="title"> 
 
    <p> 
 
    <h1>Welcome to KDU MUSIC CENTER</h1> 
 
    </p> 
 
</div> 
 

 
<div> 
 
    <ul class="nav"> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="findoutmore.php">Find out more</a></li> 
 
    <li><a href="offer.html">Offer</a></li> 
 
    <li><a href="credit.html">Credit</a></li> 
 
    <li><a href="#">Admin</a></li> 
 
    <li><a href="wireframe.html">WireFrame</a></li> 
 
    </ul> 
 

 
    <form class="formright"> 
 
    <input type="text" placeholder="Search"> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
    some text 
 
</div>

Answer 1

Diese für Sie arbeiten sollten, beachten Sie die Verwendung von Inline-Block für die Anzeige Eigenschaft Ihrer Listenelement und das Formular. Platziert auch das Text-Align-Center auf Ihrem äußeren div. Jetzt werden die Navigationselemente mit der Suche in der Mitte des Bildschirms gerendert.

Auch die Erben Polster auf der linken Seite einer ungeordneten Liste (ul) entfernt, die es etwas außermittig sah.

Bearbeiten: Um OP Kommentar zu beantworten. ich die .formright geändert Recht zu schweben, machte die # navbar 100% Breite und die ul.nav Ränder div-Container auf 0

body { 
 
    background-color: #C0C0C0; 
 
    margin: 0px; 
 
} 
 
.nav { 
 
    list-style: none; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
} 
 

 
.nav { 
 
    display: inline-block; 
 
    padding-left: 0px; 
 
    margin: 0px; 
 
} 
 

 
.formright { 
 
    display:inline-block; 
 
    float:right; 
 
} 
 

 
#navbar { 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div id="title"> 
 
    <p> 
 
    <h1>Welcome to KDU MUSIC CENTER</h1> 
 
    </p> 
 
</div> 
 

 
<div id="navbar"> 
 
    <ul class="nav"> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="findoutmore.php">Find out more</a></li> 
 
    <li><a href="offer.html">Offer</a></li> 
 
    <li><a href="credit.html">Credit</a></li> 
 
    <li><a href="#">Admin</a></li> 
 
    <li><a href="wireframe.html">WireFrame</a></li> 
 
    </ul> 
 

 
    <form class="formright"> 
 
    <input type="text" placeholder="Search"> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
</div> 
 
<div> 
 
    some text 
 
</div>

Answer 2

Es hängt wirklich davon ab, welche Art von Aussehen Sie‘ wieder gehen. Ich würde vorschlagen, Blick in flexbox ich ein traditionell aussehendes navbar gemacht habe mit ihm

body { 
 
    font-family: 'Helvetica Neue', Helvetica, sans-serif; 
 
    background-color: #CCC; 
 
    margin: 0px; 
 
} 
 
nav { 
 
    list-style: none; 
 
    background: tomato; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: flex; 
 
    align-items: center; 
 
    
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px 1em; 
 
    color: white; 
 
} 
 
nav a:hover { 
 
    background: rgba(0,0,0,0.1); 
 
} 
 
nav .spacer { 
 
    flex-grow: 1; 
 
} 
 
nav .formright { 
 
    padding: 10px; 
 
} 
 
@media (max-width: 800px) { 
 
    nav .formright { 
 
    display: none; 
 
    } 
 
}

<div id="title"> 
 
    <h1>Welcome to KDU MUSIC CENTER</h1> 
 
</div> 
 

 
<nav> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="findoutmore.php">Find out more</a></li> 
 
    <li><a href="offer.html">Offer</a></li> 
 
    <li><a href="credit.html">Credit</a></li> 
 
    <li><a href="#">Admin</a></li> 
 
    <li><a href="wireframe.html">WireFrame</a></li> 
 

 
    <div class="spacer"></div> 
 

 
    <form class="formright"> 
 
    <input type="text" placeholder="Search"> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
</nav> 
 

 
<p>Some text</p>

Sie müssen möglicherweise vollen Umfang nutzen zu öffnen, um die Suchleiste zu sehen.