样式元素占据整行但仅与内容一样宽

Question

我有一个简单的清单：

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

如何让每个<li>元素显示在它自己的行上，但同时只有它的内容宽，所以当我在它们上设置背景或边框时，它将只是广泛的内容？

Answer 1

您可以使用Flexbox并设置：

1. flex-direction: column所以每个li都显示在单独的行
上
2. align-items: flex-start因为默认值为stretch，这将使每个li占据父元素的全宽，并且您希望每个li的宽度等于内容的宽度

ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
li {
  border: 1px solid black;
}

<ul>
  <li>Element 1 some more text</li>
  <li>Element 2 text</li>
  <li>Element 3</li>
</ul>

Answer 2

您可以对其使用float和clear：

li {
float: left;
clear: left;
background: #fb4;
}

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>