Question

所以我有一个“热门新闻文章”列表，它只占用页面一小部分。但如果标题长于div的宽度，它就不会破坏句子。它只是将整个事情放在下一行。我还没有找到解决办法。

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

谢谢

Answer 1

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

或者您甚至可以使用列表的编号或H3的::before伪元素来生成编号，因此您甚至不需要标记。

下面的例子显示了后者。没有完美的样式，但只是展示了如何添加数字而没有标记。

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是块元素，因此它占用了容器的所有可用宽度。设置显示：段落元素的内联块，或者更好，用span替换它。

无序列表问题

2 个答案: