Question

我使用Bootstrap 3创建了一个移动响应式网站。我的网页上有两个顶级菜单。顶部菜单向右浮动ul，下面的菜单有两个组成部分：向左浮动ul，向右浮动搜索框。虽然浮动：右边正在搜索框上工作，但它并没有像它应该的那样向右移动;相反，它从右边留下了一些空间。我没有在搜索框中应用任何正确的边距。

但是，当我从顶部菜单ul（.settings-menu ul）中移除浮动时，搜索框会移至最右侧。这两个菜单位于不同的div中。我无法理解为什么会这样。有人能解释为什么会这样，并推荐一个解决方案？我的代码如下：

<div class="settings-menu">   <!-- Top settings/registration panel -->
    <ul>
        <li><a>Register</a></li>
        <li><a>LogIn</a></li>
        <li><a>Wishlist(0)</a></li>
        <li><a>My Account</a></li>
    </ul>
</div>

<nav class="navbar">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="menu-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home Page</a></li>
        <li><a href="#">Shop by category</a></li>
        <li><a href="#">Designers</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>

      <form class="navbar-form" role="search">
        <label for="id_search"></label>
        <input type="text" id="id_search" class="form-control" name="search_item" placeholder="Search Store">
        <button type="submit" name="search_button" id="id_search_button" class="search-button"></button>
      </form>
    </div><!-- /.navbar-collapse -->

</nav>

CSS：

body {
    font-family: arial;
    font-size: 12px;
    background: url("images/texture_2.jpg")
}

.settings-menu {
    background-color: #E87772;
    border-bottom: 4px solid #F1ADAA;
    height: 36px;
}

.settings-menu ul {
    float: right;
    width: auto;
    margin-right: 5%;
}

.settings-menu ul li{
    display: inline-block;
    padding: 5px;
    list-style: none;
}

.settings-menu ul li a{
    color: #fff;
    font-size: 14px;
}

nav {
    background-color: #fff;
    width: 100%;
}

nav ul {
    float: left;
}

.navbar-nav > li {     /*over-riding bootstrap's classes */
    display: inline-block;
    padding: 7px;   
    margin-right: 7px; 
}   

.navbar-nav > li > a{
    font-size: 16px;
    color: rgb(80,80,80);
    padding: 0px;
    padding-bottom: 7px;
}

.navbar-nav > li > a:hover{
    background-color: #fff;
}

.navbar-nav > li > a:after{
    background: none repeat scroll 0 0 #e87772;
    bottom: 0;
    content: " ";
    height: 2px;
    left: 50%;
    position: absolute;
    transition: all 0.25s ease-in-out 0s;
    width: 0;
}

.navbar-nav > li > a:hover:after, .navbar-nav > li > a:focus:after {
    left: 0;
    width: 100%;
}       

.navbar-form  {
    float: right;
    display: inline-block;
    margin-top: 0;
    width: 285px;
    height: 45px;
}

.navbar-form .search-button {
    background: url("images/icon-search-button.png") no-repeat;
    border-radius: 100%;
    background-color: #E87772;
    height: 38px;
    width: 38px;
    background-position: center;
    border: none;
    transition-property: height, width;
    transition-duration: 50ms;
    transition-timing-function: ease-in-out;
}


.navbar-form .search-button:hover {
    height: 40px;
    width: 40px;    
}

.navbar-form .cart-button {
    background: url("images/icon-cart-link.png") no-repeat;
    border-radius: 100%;
    background-color: #E87772;
    height: 38px;
    width: 38px;
    background-position: center;
    border: none;
    transition-property: height, width;
    transition-duration: 50ms;
    transition-timing-function: ease-in-out;
}

.navbar-form .cart-button:hover {
    height: 40px;
    width: 40px;    
}


#id_search {              /* for text-box */
    border-radius: 0px;
    border-right: none;
    border-left: none;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    box-shadow: none;
    margin-top: 5px;
}

#search-box {
    float: right;
}

Answer 1

.navbar-collapse.collapse 具有默认的bootstrap填充。试试这个Demo

.navbar-collapse.collapse{
    padding-right :0 !important;
}

CSS浮动表现得很神秘

1 个答案: