将搜索框和搜索按钮与HTML5中的导航链接水平对齐
将搜索框和搜索按钮与HTML5中的导航链接水平对齐
提问于 2015-07-18 16:06:45
如何将搜索框和按钮与HTML5中的导航链接水平对齐？我已将搜索框添加到导航栏，但它位于导航链接的下方。
下面是问题的一张图片：
/* Below is the code for the navigation bar */
nav {
display: block;
}
nav {
margin: 0;
clear: both;
text-align: left;
widht: 10px;
padding: 25px;
background-color: #68b12f;
border-radius: 5px;
background: linear-gradient(top, #68b12f, #50911e);
border: 2px solid #509111;
border-bottom: 2px solid #5b992b;
overflow: hidden;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav {
margin: 0;
clear: both;
text-align: left;
widht: 10px;
padding: 25px;
background-color: #68b12f;
border-radius: 5px;
background: linear-gradient(top, #68b12f, #50911e);
border: 2px solid #509111;
border-bottom: 2px solid #5b992b;
overflow: hidden;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
/* Below is the code for the search box and button */
#search-bar {
border: 1px solid blue;
padding: 5px;
border-radius: 5px;
}
#search-button {
border: 1px solid blue;
padding: 5px;
border-radius: 5px;
}<!-- Below is the code for the navigation bar. -->
<div class="navigation" id="navigation">
<nav>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="/data_centre/register.php">Booking</a></li>
<li><a href="/data_centre/display_user.php">Display User</a></li>
<form>
<input name="q" id="search-bar" type="search" placeholder="Type to Search">
<input id="search-button" type="submit" value="Find">
</form>
</ul>
</nav>
</div>
我只想水平对齐导航链接和搜索框和查找按钮。
回答 2
Stack Overflow用户
发布于 2018-06-15 16:20:58
首先，请删除
<form>
<input name="q" id="search-bar" type="search" placeholder="Type to Search">
<input id="search-button" type="submit" value="Find">
</form>并将其包装在另一个div中。
请参阅此小提琴以获取简要信息：https://jsfiddle.net/nirmohi_shah/50aL2vhy/3/
Stack Overflow用户
发布于 2018-06-15 19:44:34
在这种情况下，表单不应该放在ul内，将其从ul中移除并取出以水平对齐：
HTML
<div class="navigation" id="navigation">
<nav>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="/data_centre/register.php">Booking</a></li>
<li><a href="/data_centre/display_user.php">Display User</a></li>
</ul>
<div class="searchbar">
<form>
<input name="q" id="search-bar" type="search" placeholder="Type to Search">
<input id="search-button" type="submit" value="Find">
</form>
</div>
</nav>
</div>CSS
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31489143
复制相关文章
相似问题