display:inline-block 無序列表布局的文字錯位問題及解決方法
阿新 • • 發佈：2018-07-02
size 默認值 cbc log 圖片 改變 ref padding utf <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;
background: black;
margin: 0 auto;
text-align: center;
}
.demo ul li{
display: inline-block;
}
.demo ul li h1{
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>
<li>
<h1>好好學習 天天向上</h1>
<p>
這段文字只有一行
這段文字只有一行
</p>
</li>
<li>
<h1>好好學習 天天向上</h1>
<p>
這段文字只有兩行
這段文字只有兩行
</p>
</li>
<li>
<h1>好好學習 天天向上</h1>
<p>
這段文字只有兩行
這段文字只有兩行
這段文字只有三行
</p>
</li>
</ul>
</div>
</body>
<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;
background: black;
margin: 0 auto;
text-align: center;
}
.demo ul li{
display: inline-block;
}
.demo ul li h1{
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">
<li>
<h1>好好學習 天天向上</h1>
<p>
這段文字只有一行
這段文字只有一行
</p>
</li>
<li>
<h1>好好學習 天天向上</h1>
<p>
這段文字只有兩行
這段文字只有兩行
</p>
</li>
<li>
<h1>好好學習 天天向上</h1>
<p>
這段文字只有兩行
這段文字只有兩行
這段文字只有三行
</p>
</li>
</ul>
</div>
</body>
問題：
文字都在兩行內顯示沒有問題；
當調整p標簽裏面的元素時，出現一行顯示的內容，這時布局出現錯位。
解決辦法
在 .demo ul li 添加 vertical-align: top;
vertical-align 屬性設置元素的垂直對齊方式
因為vertical-align的默認值是baseline,根據調試發現，盒子和布局大小都是正確的，後調整文字內容，發現出現錯位的影響因素是文字的垂直對齊的問題，於是嘗試改變垂直對齊方式，最後發現給display：inline-block的元素添加 vertical-align: top;可以解決這個問題。
圖片來源w3school。
display:inline-block 無序列表布局的文字錯位問題及解決方法