html - 将我的选择选项和我的输入搜索对齐在我的#menu div 的中心

标签 html css

我正在为移动设备制作菜单结构,但我无法将我的选择选项菜单和我的搜索输入居中对齐。

我正在尝试 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;
}

最佳答案

Demo 这里

删除下面的样式并添加 text-align:center#menu

#search_container{
    float:right;    
}

关于html - 将我的选择选项和我的输入搜索对齐在我的#menu div 的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25251012/

相关文章:

javascript - 增加 Bootstrap 2.3 的 Glyphicons 的大小

html - 仅在有足够空间时显示一个div,如果没有则隐藏它

css - 如何在左边放置一个div,在右边放置两个div

javascript - 如何使 .toggleClass 按钮单击在不同页面上保持其效果?

javascript - Jquery 可以将音频播客提要解析为 HTML5 吗?

javascript - 获取隐藏 span 标签的文本值

html - 将 svg 形状和线条添加到 SVG 剪辑的 div

html - 元素百分比定位在 webkit 和 mozilla 中具有不同的效果

jquery - 隐藏显示切换按钮图像

javascript - 需要 : HTML 5/Javascript UI Component to do "Matching"/"Data Mapping" UI