无序列表的问题

Question

所以我有一个 "Top News Articles" 的列表，它只占页面一侧的一小部分。但是如果标题长于 div 的宽度，则不会中断句子。它只是将整个内容放在下一行。我还没能找到解决办法。

<li>
    <p class="number">1</p>
    <a href="#"><h3>Virtual Reality Being Used in School</h3></a>
</li>

谢谢

Answer 1

您可以通过在H3 中添加数字来解决此问题。

或者你甚至可以使用列表的编号，或者 H3 的 ::before pseudo-element 来生成编号，所以你甚至不需要标记。

下例显示的是后者。样式不完美，只是展示了如何在没有标记的情况下添加数字。

ul.headings {
 list-style-type: none; 
}
.headings {
  counter-reset: header-counter;
}
.headings li::before {
  /* Showing and incrementing the counter */
  content: counter(header-counter);
  counter-increment: header-counter;

  /* Some styling to make it red and round and white, etc. */
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: red;
  color: white;
}

<ul class="headings">
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

Answer 2

p 是块元素，因此它占据了其容器的所有可用宽度。为段落元素设置 display:inline-block，或者更好的是，将其替换为 span。

无序列表的问题

Issue with an unordered list

html

css

listitem

html-lists