爲什麼這個內嵌塊不會一直向右對齊？

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>