導航欄和搜索框內嵌

Question

如何在頁面中間的一行中創建水平導航欄和搜索框？ 我使用文本對齊中心將導航欄放在頁面的中心，但是當我使用浮動使搜索框位於導航旁邊時，整個導航欄都會浮動到左側。

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

這應該爲你工作，請注意您的列表項和表單的顯示屬性中使用inline-block的的。還將文本對齊中心放置在外部div上。現在將呈現在屏幕中心搜索的導航項目。

還刪除了無序列表（ul）左側的繼承填充，使其略微偏離中心。

編輯：回覆OP的評論。 我改變了.formright浮動權，取得了div容器＃導航欄寬度爲100％和ul.nav邊距設置爲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

這要看什麼樣的樣子的你」重新開始。我建議尋找到flexbox我用它

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>

您可能需要打開全屏看到搜索欄做了一個傳統的尋找導航欄。