溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MBA</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo{
width: 1000px;
height: auto;
background: black;
margin: 0 auto;
text-align: center;
}
.demo ul li{
display: inline-block;
}
.demo ul li h2{
width: 220px;
height: 40px;
line-height: 40px;
background: red;
text-align: center;
color: black;
}
.demo ul li p{
width: 220px;
height: 100px;
background: #eee;
color: black;
}
</style>
<div class="demo">
<ul>
<li>
<h2>好好學習 天天向上</h2>
<p>
這段文字只有一行
這段文字只有一行
</p>
</li>
<li>
<h2>好好學習 天天向上</h2>
<p>
這段文字只有兩行
這段文字只有兩行
</p>
</li>
<li>
<h2>好好學習 天天向上</h2>
<p>
這段文字只有兩行
這段文字只有兩行
這段文字只有三行
</p>
</li>
</ul>
</div>
</body>
</html>
問題：
文字都在兩行內(nèi)顯示沒有問題；
當調(diào)整p標簽里面的元素時，出現(xiàn)一行顯示的內(nèi)容，這時布局出現(xiàn)錯位。
解決辦法
在 .demo ul li 添加 vertical-align: top;
vertical-align 屬性設置元素的垂直對齊方式
因為vertical-align的默認值是baseline,根據(jù)調(diào)試發(fā)現(xiàn)，盒子和布局大小都是正確的，后調(diào)整文字內(nèi)容，發(fā)現(xiàn)出現(xiàn)錯位的影響因素是文字的垂直對齊的問題，于是嘗試改變垂直對齊方式，最后發(fā)現(xiàn)給display：inline-block的元素添加 vertical-align: top;可以解決這個問題。
圖片來源w3school。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
