为什么这个内联块不会一直对齐？

Question

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

这是小提琴： https://jsfiddle.net/oqxm93c0/

我的目标是将黑线和文字对齐在右边缘。此外，我更喜欢使用尽可能少的CSS，并倾向于避免浮动（特别是如果我必须使用“clearfix”类型的方法）。

THX！ ：

Answer 1

final Root root = gson.fromJson(JSON, Root.class); System.out.println(root.software.sub.get("windows").sub.get("photoshop").info.name); 或inline元素可保留元素中/周围的空白区域。要删除该空格，最简单的方法是删除HTML中inline-block元素之间的空格。

您还可以在元素之间放置HTML注释（如果要维护代码对齐/缩进/等），或者将父级inline-block设置为font-size，然后重置字体大小关于儿童元素。

0

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