Question

这是我今天发现的一个错误，并且让我感到困扰了一段时间。我终于解决了这个问题，但我对这种情况发生的原因或原因感到好奇，并且知道是否有更好的解决方案（我确信有）：

我使用无序列表创建了一个菜单，对于某些列表项，我想在它们的右侧显示一个计数器（以红色气泡的形式，里面有一个白色数字）。

编码后，我得到了链接名称旁边的红色气泡，但当我向右浮动时，气泡膨胀占据了父母高度的100％并实际影响其高度（取消注释） /*float:right;*/在下面的代码中看到它）。红色气泡不应该向右浮动而保持其方面吗？看起来似乎正在应用display:inline-block或height:100%（或两者）。

我尝试使用不同的值和display设置height和!important，但似乎没有任何效果。我最后通过添加line-height:16px并添加margin-top:10px来修复此问题。但我不是这个解决方案的忠实粉丝，因为它取决于将来可能改变的菜单的高度（我怀疑它，但它可能发生）。有没有更好的解决方案呢？

您可以在此处查看代码:(以及此链接http://jsfiddle.net/9nw2zu7y/）

＆＃13;

* {
  border: 0px;
  margin: 0px;
  padding: 0px;
}
#menu {
  background: #555566;
  position: relative;
  width: 200px;
}
#menu li {
  display: block;
  min-height: 36px;
  line-height: 36px;
}
#menu a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 0px 10px;
  border-top: 1px dotted #5c5c6d;
  position: relative;
  overflow: hidden;
}
#menu a.counter:after,
#menu a span.counter {
  content: attr(data-count);
  background: red;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 50%;
  /*float:right;*/
}

＆＃13;

<ul id="menu">
  <li><a href="#">List Item 1</a>
  </li>
  <li>
    <a href="#">List Item 2</a>
    <ul>
      <li><a href="#">SubList Item 1<span class="counter" data-count="2">1</span></a>
      </li>
      <li><a href="#">SubList Item 2</a>
      </li>
      <li class="last"><a href="#" class="counter" data-count="2">SubList Item 3</a>
      </li>
    </ul>
  </li>
  <li><a href="#">List Item 3</a>
  </li>
  <li><a href="#">List Item 4</a>
  </li>
</ul>

＆＃13;

Answer 1

当您使内联元素浮动时，根据CSS 2.1 Section 9.7处的表格，它也会变为display:block。

块元素的高度，如果它没有指定显式高度/最小高度/最大高度，它包含的行框的总高度，在这种情况下，一行具有计数器值在它。

线框的高度（至少）是继承的线高值的高度，使元素成为包含线高的高度。因此，您对行高的调整是正确的。

另一种方法是将计数器元素分成内部和外部元素，浮动外部元素并将红色圆形样式添加到内部元素，然后可以保留display:inline。

Answer 2

我讨厌在这种情况下漂浮的东西。在我看来，浮动的唯一东西现在大部分都是有用的网格系统（最终将被弹性框实现取代）。

我这样做的方式（可能只是个人偏好）是position。

以下是半伪代码（只是它的关键）如何用相对和绝对定位来实现

<li><a href="#">SubList Item 1<span class="counter" data-count="2">1</span></a></li>

li a { display: inline-block; position: relative; padding-right: 5px; }
li a span.counter { position: absolute; left: 100%; top:0; }

Answer 3

答案是因为span是一个内联元素。解决方案是将高度重置（限制）添加到css中，如下所示：

#menu a span.counter {
  content: attr(data-count);
  background: red;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 50%;
  float:right;
  display: inline-block;
  line-height: 1;
}

浮动元素如何影响其高度/显示？

3 个答案: