浮動元素問題

Question

我讀了一些關於浮動元素的文章，但我有一些問題需要理解，我必須浮動我的項目的以下部分。你能給我如何構建代碼或解釋的建議嗎？我有UL少LI項目，並在我的LI項目內，我有一個標籤+跨班級，我試圖漂浮A標籤左側和跨度右側，但是當我漂移跨度右側它落後內容..我不知道這裏居然跨度「從我隱藏」 ...的箭頭應在黎。測試div的結束不是外面

.widgets { list-style: none; float: left; } 
 

 
.widget-title { background: url(../images/sidebar.jpg) 0 0 no-repeat; width: 189px; clear: both; } 
 
.widget-title h3 { font-family: "Georgia", serif; font-size: 14px; font-weight: normal; color: #333329; text-transform: uppercase; padding: 2px 10px; } 
 

 
.widget { margin-bottom: 39px; } 
 
.widget ul { list-style: none; } 
 
.widget ul { line-height: 29px; margin-top: 1px; } 
 
.widget ul li a { position: relative; text-decoration: none; font-size: 12px; color: #666651; padding: 0 10px 0 11px; } 
 
.widget ul li a:after { content: ''; position: absolute; top: 25px; left: 10px; width: 171px; height: 1px; box-shadow: 0px 1px 1px #ededde, 0px 1px 1px #ededde; opacity: 0.5; } 
 
.widget ul li a:hover { color: #46462b; } 
 
.test { overflow: hidden; } 
 
.test ul { float: right; } 
 
.btn-arrow { background: url(https://s12.postimg.org/9olm50ogt/sidebar_arrow.png) 0 0 no-repeat; width: 11px; padding: 0 8px; float: right; }

<li class="widget"> 
 
    <div class="widget-title"> 
 
    <h3>categories</h3> 
 
    </div><!-- widget-title --> 
 
\t \t \t \t \t \t \t 
 
    <ul class="test"> 
 
    <li><a href="#">Category Title</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Second Category</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Placeholder Three</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Fourth Title</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Category Five</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Sixth Category</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Placeholder Seven</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Category Eight</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Nineth Title</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Placeholder Ten</a><span class="btn-arrow"></span></li> 
 
    </ul> 
 
</li><!-- widget -->

Answer 1

浮動由於您使用圖片作爲背景，因此元素不知道要跟隨的高度，因此獲得0.因此，如果您將高度：14px放在.btn-箭頭上，它應該可以工作。看看上面的ACODE：

.widgets { list-style: none; float: left; } 
 

 
.widget-title { background: url(../images/sidebar.jpg) 0 0 no-repeat; width: 189px; clear: both; } 
 
.widget-title h3 { font-family: "Georgia", serif; font-size: 14px; font-weight: normal; color: #333329; text-transform: uppercase; padding: 2px 10px; } 
 

 
.widget { margin-bottom: 39px; } 
 
.widget ul { list-style: none; } 
 
.widget ul { line-height: 29px; margin-top: 1px; } 
 
.widget ul li a { position: relative; text-decoration: none; font-size: 12px; color: #666651; padding: 0 10px 0 11px; } 
 
.widget ul li a:after { content: ''; position: absolute; top: 25px; left: 10px; width: 171px; height: 1px; box-shadow: 0px 1px 1px #ededde, 0px 1px 1px #ededde; opacity: 0.5; } 
 
.widget ul li a:hover { color: #46462b; } 
 
.test { overflow: hidden; } 
 
.test ul { float: right; } 
 
.btn-arrow { background: url(https://s12.postimg.org/9olm50ogt/sidebar_arrow.png) 0 0 no-repeat; width: 11px; padding: 0 8px; float: right; height: 14px; }

<li class="widget"> 
 
    <div class="widget-title"> 
 
    <h3>categories</h3> 
 
    </div><!-- widget-title --> 
 
\t \t \t \t \t \t \t 
 
    <ul class="test"> 
 
    <li><a href="#">Category Title</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Second Category</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Placeholder Three</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Fourth Title</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Category Five</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Sixth Category</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Placeholder Seven</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Category Eight</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Nineth Title</a><span class="btn-arrow"></span></li> 
 
    <li><a href="#">Placeholder Ten</a><span class="btn-arrow"></span></li> 
 
    </ul> 
 
</li><!-- widget -->