我读了几篇有关浮动元素的文章，但是我有一些问题来了解如何浮动我项目的以下部分。您能给我一些有关如何构造代码的建议或一些解释吗？我有几个LI项目的UL，而在我的LI项目内部，我有一个带有类的A标签+跨度，我试图将A标签向左浮动，将跨度向右浮动，但是当我将跨度浮动到右侧时，它在后面内容。我不知道跨度实际上在哪里“隐藏在我身旁” ...箭头应漂浮在.test li 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 -->
<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 -->由于您将图像用作背景，因此该元素不知道要跟随的高度，因此将其设为0。因此，如果在.btn-arrow上放置height：14px ，它应该可以工作。看上面的代码：
.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 -->
<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 -->本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句