顯示跨度內聯塊與內嵌結合

Question

如果您有三個跨度元素，您是如何顯示它們的？

span1_______   span3 
      ||||||||| 
      ||||||||| 

      span2 

SPAN1被內聯塊寬度調整 跨距2是內聯塊邊距調整 span3是直列

但是跨距2下拉SPAN1並用下來跨距2？

Answer 1

這聽起來是正確的 - 邊緣可能推動塊級容器，其中包含所有三個。您可以考慮在span2上嘗試position: relative，並將它的margin-top更改爲top。

Answer 2

如果我確實理解你想要的東西。您可以嘗試使用transform:translateY(npx)或者您可以使用%

見例如：

span:nth-child(2){ 
 
position:relative; 
 
transform:translateY(10px); 
 
display:inline-block; 
 
}

<span>span1</span> 
 
<span>span2</span> 
 
<span>span3</span>

或方式來實現你的例子（與黑線），使用這個CSS

span:nth-child(2){ 
 
    width:100px; 
 
    border-bottom:1px solid #000; 
 
    display:inline-block; 
 
}

<span>span1</span> 
 
<span></span> 
 
<span>span3</span>