CSS가 이상하게 작동합니다.

Question

모바일 대응 웹 사이트를 만들 때 부트 스트랩 3을 사용하고 있습니다. 내 웹 페이지에는 2 개의 최상위 메뉴가 있습니다. 상단 메뉴는 오른쪽으로 플로팅 된 ul이며 그 아래 메뉴에는 ul 왼쪽과 검색 창 오른쪽이 플로팅 된 두 가지 구성 요소가 있습니다. float : 오른쪽이 검색 창에서 작동하고 있지만 꼭 그래야하는 것처럼 극단적으로 이동하지는 않습니다. 대신 오른쪽에서 약간의 공간을 남겨 둡니다. 검색 창에 오른쪽 여백을 적용하지 않았습니다.

그러나 상단 메뉴의 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이 bootstrape하여 기본 패딩이있다. 내 양식 태그가 넘어 방법입니다, 그래서이 패딩 문제가되지 않습니다 동안 15 픽셀 아니라 .navbar 붕괴에서이 Demo

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