<分区>
<分区>
有一个包含四列的表格。在第一列中有一个图像。我已经设置了 align attribute至 top .其余列包含文本。但是 <li>标签丢失了 inline display文本插入第四列时的顺序。
任何解决此问题的建议将不胜感激。
ul.film1 li,
ul.film2 li,
ul.film3 li {
width: 150px;
height: 290px;
border: 3px solid blue;
display: inline-block;
}
#tableheadheader1,
#tableheadbody1 {
font-family: Lato;
font-size: 16px;
text-align: center;
}
#tableheadfooter1 {
font-family: Lato;
font-size: 10px;
text-align: justify;
}<ul class="film1">
<li id="tableheadimage1">
<img src="http://placehold.it/75x75" align="top">
</li>
<li id="tableheadheader1">
<p>Tomorrowland</p>
</li>
<li id="tableheadbody1">
<p>2015</p>
</li>
<li id="tableheadfooter1">
<p>Whenever Casey Newton (Britt Robertson) touches a lapel pin with the letter T on it, she finds herself transported to Tomorrowland, a city filled with huge robots and sleek buildings. The gifted young woman recruits the help of scientist Frank Walker
(George Clooney), a previous visitor to Tomorrowland, who years ago made a startling discovery about the future. Together, the two adventurers travel to the metropolis to uncover its mysterious secrets.</p>
</li>
</ul>最佳答案
如果你输入 vertical-align: top;在你的 <li> elements 应该可以解决您的问题。
ul.film1 li,
ul.film2 li,
ul.film3 li {
width: 150px;
height: 290px;
border: 3px solid blue;
display: inline-block;
vertical-align: top; /* <-- this has been added */
}
#tableheadheader1,
#tableheadbody1 {
font-family: Lato;
font-size: 16px;
text-align: center;
}
#tableheadfooter1 {
font-family: Lato;
font-size: 10px;
text-align: justify;
}<ul class="film1">
<li id="tableheadimage1">
<img src="http://placehold.it/75x75" align="top">
</li>
<li id="tableheadheader1">
<p>Tomorrowland</p>
</li>
<li id="tableheadbody1">
<p>2015</p>
</li>
<li id="tableheadfooter1">
<p>Whenever Casey Newton (Britt Robertson) touches a lapel pin with the letter T on it, she finds herself transported to Tomorrowland, a city filled with huge robots and sleek buildings. The gifted young woman recruits the help of scientist Frank Walker
(George Clooney), a previous visitor to Tomorrowland, who years ago made a startling discovery about the future. Together, the two adventurers travel to the metropolis to uncover its mysterious secrets.</p>
</li>
</ul>关于css - 为什么 <li> 标签放错地方了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35556962/