爲什麼第一個跨度在第二個跨度的底部沒有相同的高度？

我有這樣的HTML：爲什麼第一個跨度在第二個跨度的底部沒有相同的高度？

.one{ 
 
    display: inline-block; 
 
    width: 80px; 
 
    border: 1px solid; 
 
} 
 

 
.two{ 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: 1px solid; 
 
}

<span class="one"> Explanation: </span> 
 
<span class="two">There is some explanation about something. There is some explanation about something</span>

正如你看到的，EXPLANATION字是.two箱的底部。我怎樣才能保持它的頂部？下面是預期的結果：

來源

2016-08-18 Martin AJ

vertical-align: top;來救援！

.one{ 
 
    display: inline-block; 
 
    width: 80px; 
 
    border: 1px solid; 
 
    vertical-align: top; 
 
} 
 

 
.two{ 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: 1px solid; 
 
}

<span class="one"> Explanation: </span> 
 
<span class="two">There is some explanation about something. There is some explanation about something</span>

來源

2016-08-18 08:01:41 Alex

只有一件事，什麼是'垂直align'屬性的值top'和'文本top''之間的區別？ –

@MartinAJ只是google it :) top：「將元素的頂部及其後代與整行的頂部對齊。」，text-top：「將元素的頂部與父元素的頂部對齊。「來自：https：//開發人員。mozilla.org/en-US/docs/Web/CSS/vertical-align – Alex

垂直對齊屬性有baseline默認值，這就是爲什麼第一跨度到達查看基線，因爲下一個跨度有較大的高度。

爲了使其查看頂部，你需要將vertical-align屬性設置爲頂部：

.one{ 
    display: inline-block; 
    width: 80px; 
    border: 1px solid; 
    vertical-align: top; 
}

來源

2016-08-18 08:04:23 KAD

span是具有默認vertical-align: baseline的inline元素。

添加vertical-align: top來覆蓋它。

.one { 
 
    display: inline-block; 
 
    width: 80px; 
 
    border: 1px solid; 
 
    vertical-align: top; 
 
} 
 
.two { 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: 1px solid; 
 
    vertical-align: top; 
 
}

<span class="one"> Explanation: </span> 
 
<span class="two">There is some explanation about something. There is some explanation about something</span>

來源

2016-08-18 08:06:35 Pugazh

使用vertical-align: top;

這裏的article解釋CSS默認的底線。

.one{ 
    display: inline-block; 
    width: 80px; 
    border: 1px solid; 
    vertical-align: top; 
}

來源

2016-08-18 08:07:09 Radex

默認所有inline和inline-block元件根據父元素的baseline對準。

從WikiPedia：

基線是對其最字母「坐」而在其下面伸延長線。

爲了解決這個問題，你可以使用vertical-align: top與display: inline-block明確。

.one, 
 
.two { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    border: 1px solid; 
 
} 
 

 
.one { 
 
    width: 80px; 
 
} 
 

 
.two { 
 
    width: 100px;  
 
}

<span class="one"> Explanation: </span> 
 
<span class="two">There is some explanation about something. There is some explanation about something</span>

來源

2016-08-18 08:16:18

爲什麼第一個跨度在第二個跨度的底部沒有相同的高度？

回答

相關問題