html - float 元素问题

Question

我阅读了一些关于 float 元素的文章，但我在理解如何 float 元素的以下部分时遇到了一些问题。你能给我关于如何构建代码的建议或一些解释吗？我的 UL 几乎没有 LI 元素，在我的 LI 元素中我有 A 标签 + Span with class 我试图将 A 标签 float 到左侧，将跨度 float 到右侧，但是当我将跨度 float 到右侧时，它会落后内容..我不知道跨度实际上在哪里“对我隐藏”......箭头应该 float 在 .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 -->

Answer 1

由于您使用图像作为背景，该元素不知道要达到什么高度，因此得到 0。因此，如果您将 height: 14px 放在 .btn-arrow 中，它应该可以工作。请看下面的代码:

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