Question

我正在制作移动设备的菜单结构，但我无法在中心选择选项菜单和搜索输入。

我尝试使用保证金：0自动;但它没有工作，我的选择选项和我的搜索输入没有到达我的菜单的中心。

#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;
}

Answer 1

只需将display:table添加到#select_menu

即可

#select_menu{
    margin:11px auto;
    height:30px;
    width:226px; 
    background:#ccc;
    color:#2F3083;
    display: table;
}

然后将width: 100%; text-align: center;添加到 #search_container

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

Answer 2

Demo 此处

删除以下样式并将text-align:center添加到#menu

#search_container{
    float:right;    
}

Answer 3

添加text-align：center;到你的#menu

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

3 个答案: