<li>タグが間違って配置されているのはなぜですか？

debugcn 投稿 Dev

user2326844

4列のテーブルがあります。最初の列に画像があります。に設定しalign attributeましたtop。残りの列にはテキストが含まれています。ただし、テキストが4番目の列に挿入されると、<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>

dinkydani

あなたがvertical-align: top;あなたの<li>要素を身に着けているならば、あなたの問題を解決するはずです。

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]