display:inline 的排版心得

inline 排版常用，但需對它作複雜排版的需求少見。inline 的表現有時跟你想的不一樣。

parent{
display:inline;
}

child{
display: inline;
position:absolution;
right:0;
}

<div class="parent">
  <div class="child">
    放一些中文在這
  </div>
  <div class="child">
    Some words here...
  </div>
</div>

原本需求：讓他們全貼齊容器右側，並且位置重疊。

結果：child 內容全中文和內容全英文的視覺表現都不一樣，而且都不合於預期；中文整個貼齊容器右側且每字斷行，視覺上呈獻「直行」的排版效果。而英文則是每個字向右對齊容器右側，垂直排成一列。

解析原因：因為中文每個都是word；英文只有遇到word才會在上述狀況內強迫斷行掉到下一排。

問題排除：white-space: nowrap;