为什么这个内嵌块不会一直向右对齐？

Question

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

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

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

Thx！ ：]

Answer 1

的inline或inline-block元件保留在元件周围/空白。要移除该空间，最简单的方法是删除HTML中的inline-block元素之间的空格。你也可以在元素之间放置一个HTML注释（如果你想维护代码对齐/ indents/etc），或者设置父级的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>