我.float：右元素是浮動的過去，它是一個包含DIV

Question

我已經在引導一個HTML文件，下面這個簡單的導航欄加載：

<div class="nav-bar"> 
      <div class="container"> 
       <ul style="float:left"> 

        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Womens-Fashion_W0QQfsubZ5511742012">women's</a></li> 
        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Mens-Fashion_W0QQfsubZ5511743012">men's</a></li> 
        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Youth-Fashion_W0QQfsubZ5511744012">youth</a></li> 
        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Baby_W0QQfsubZ5511745012">baby</a></li> 

       </ul> 
       <ul style="float:right"> 
        <li><a target="_blank" href="http://stores.ebay.com/doboyo">STORE HOME</a></li>    
       </ul> 
      </div> 
     </div> 

使用下面的CSS：

.listing-template .nav-bar { 
    width:748px; 
} 

.listing-template .nav-bar ul { 
    padding-left: 2px; 
    padding-right: 5px; 
} 

.listing-template .nav-bar a { 
    color: #D7E3E9; 
    font-family: oswald, sans-serif; 
    font-size: 14px; 
    font-weight: 300; 
    padding: 8px; 
    text-transform: uppercase; 
} 

.listing-template .nav-bar li { 
    display:inline-block; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    border: 1px solid #D7E3E9; 
} 

我問題在於右邊浮動的元素是浮動的方式通過包含DIV一直到頁面的邊緣。我怎樣才能保持它的div內的float：right元素？我需要先清除浮標嗎？

Answer 1

您正在使用類container，具有固定的寬度和它打破你的實際佈局：

從引導CSS：

@media (min-width: 768px) { 
    .container { 
    width: 750px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
    width: 970px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
} 

如果刪除則div將有100% width和浮動將按預期工作。

Answer 2

爲防萬一你想在你的導航上放置一個背景，請看這個解決方案。

.container 
 
{ 
 
    width: 748px; 
 
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCWVb54xv1i3ncYe1MCKY4vt9y7AdDMiCvthGjPTAXFJEzjjoy8w"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.leftContainer 
 
{ 
 
    width: 200px; 
 
} 
 

 
.rightContainer 
 
{ 
 
    width: 200px; 
 
} 
 

 
.listing-template .nav-bar 
 
{ 
 
    width:748px; 
 
} 
 

 
.listing-template .nav-bar ul 
 
{ 
 
    padding-left: 2px; 
 
    padding-right: 5px; 
 
} 
 

 
.listing-template .nav-bar a 
 
{ 
 
    color: #D7E3E9; 
 
    font-family: oswald, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    padding: 8px; 
 
    text-transform: uppercase; 
 
} 
 

 
.listing-template .nav-bar li 
 
{ 
 
    display:inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border: 1px solid #D7E3E9; 
 
} 
 

 
.clear 
 
{ 
 
    clear: both; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="nav-bar"> 
 
      <div class="container"> 
 
       <div class="leftContainer pull-left"> 
 
        <ul> 
 
         <li><a target="_blank" href="http://stores.ebay.com/doboyo_Womens-Fashion_W0QQfsubZ5511742012">women's</a></li> 
 
         <li><a target="_blank" href="http://stores.ebay.com/doboyo_Mens-Fashion_W0QQfsubZ5511743012">men's</a></li> 
 
         <li><a target="_blank" href="http://stores.ebay.com/doboyo_Youth-Fashion_W0QQfsubZ5511744012">youth</a></li> 
 
         <li><a target="_blank" href="http://stores.ebay.com/doboyo_Baby_W0QQfsubZ5511745012">baby</a></li> 
 
        </ul> 
 
       </div> 
 
       <div class="rightContainer pull-left"> 
 
        <ul> 
 
         <li><a target="_blank" href="http://stores.ebay.com/doboyo">STORE HOME</a></li>    
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div>

這意味着你不會有改變你容器的整體規模，這樣做可能會影響到你網頁的整體寬度如果容器是所有元素的父容器。

Daniel提到了可以根據視口大小調整CSS的媒體查詢。這些確實非常方便。