css - 为什么这个内联 block 不会一直向右对齐？

Question

我有一个带有 display:inline-block; 的 div，容器是 text-align:right;，但是 div 和容器的右侧。为什么它不一直走到边缘？

这是 fiddle : https://jsfiddle.net/oqxm93c0/

我的目标是让黑线和文本在右边缘对齐。此外，我更喜欢使用尽可能少的 css，并且倾向于回避 float (尤其是当我必须使用“clearfix”类型的方法时)。

谢谢! :]

Answer 1

inline 或 inline-block 元素在元素内/周围保留空白。要删除该空格，最简单的方法是删除 HTML 中 inline-block 元素之间的空格。

你也可以在元素之间放置一个 HTML 注释(如果你想保持代码对齐/缩进等)，或者将父元素的 font-size 设置为 0，然后重置子元素的字体大小。

.container {
  padding-top:6px;
  text-align:right;
  width:400px;
  background: #eee;
}
.line {
  width:100px;
  height:2px;
  background:black;
  display:inline-block;
}

<div class="container">
  <div class="line"></div><br><a href="#">Hello</a>
</div>