我正在为移动设备制作菜单结构,但我无法将我的选择选项菜单和我的搜索输入居中对齐。
我正在尝试 margin: 0 auto;但它不起作用,我的选择选项和我的搜索输入没有到达我的菜单的中心。
#menu div 的宽度为 300px,我希望我的选择选项菜单和输入搜索的宽度为 226px,并在我的#menu div 的中心对齐,但我没有成功这样做。
有人看到这里出了什么问题吗?
我这里有我的例子: http://jsfiddle.net/x5pb7mw4/1/
我的 html:
<section id="menu-container">
<nav id="menu">
<select id="select_menu">
<option value="menu" selected="selected" name="menu">- Menu -</option>
</select>
<ul class="dropDownMenu">
<li id="search_container">
<form id="search" method="post" enctype="multipart/form-data">
<input name="s" type="text" size="40" placeholder="Search..." />
<button type="submit" name="search"></button>
</form>
</li>
</ul>
</nav>
</section>
我的CSS:
*
{
margin:0;
padding:0;
border:0;
outline:none;
}
body
{
min-width:320px;
}
#menu-container{
width:100%;
height:auto;
float:left;
z-index:7;
float:left;
background:brown;
border-bottom: 3px solid #ccc;
}
#menu{
width:300px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul{list-style:none;}
#menu .dropDownMenu .item_menu{display:none;}
#select_menu{
margin:11px auto;
height:30px;
width:226px;
background:#ccc;
color:#2F3083;
}
#search_container{
float:right;
}
#search button[type="submit"] {
background: none;
cursor: pointer;
height: 22px;
position: absolute;
top: 15px;
right: 10px;
}
#search input[type="text"] {
font-size:13px;
background: brown;
border:2px solid #000;
text-indent: 0;
width:226px;
margin:0 auto 10px auto;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
color:#ccc;
}
最佳答案
关于html - 将我的选择选项和我的输入搜索对齐在我的#menu div 的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25251012/