浮动元素问题

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 -->