Flex <ul> 其中每个 <li> 是一个框，背景颜色不会占满 space

Question

目前正在构建一个如下所示的列表。

我决定用它制作一个 flexbox，其中每个 li 都是一个盒子。一切正常，但奇数框上的背景颜色不会向左延伸。事实上，它们就在项目符号元素之前停止。这是我正在做的事情和我的代码的快照。

CSS:

ul {
    display: flex;
    flex-direction: column;
}

li {
    padding: 10px 0 10px;
    padding-left: .5em;
    color: rgba(250, 250, 250);
}

::marker {
    color: rgba(250, 250, 250);
    font-size: 1em;
    content: '\f522';
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
}

li:nth-child(odd) {
  background-color: rgba(250, 250, 250, 0.4);
}

li:nth-child(odd)::marker {
    color: rgba(0, 0, 0);
}

HTML:

                        <ul>
                            <li> 2 </li>
                            <li> 3 </li>
                            <li> 5 </li>
                            <li> 7 </li>
                            <li> 8 </li>
                        </ul>

如果可能的话，我也想保留 ::marker 方法。我已经看到了 ::before 和 ::after 的解决方案，但这并不是我想要的。谢谢。

Answer 1

在伪元素之前使用。 Here is the fiddle

li {
    padding: 10px 0 10px;
    padding-left: .5em;
    
    
    &::before {
      content: "F";
      background-color: #000;
      border-radius: 50%;
      width: 5px;
      height: 5px;
      position: relative;
    }
}

用你的::marker代码替换content: "F";

Answer 2

试试这个

这里我在ul中使用了list-style-position: inside和padding-left: 0;

您可以查看下面的代码。

body {
  margin: 0;
  padding: 0;
} 
ul {
    display: flex;
    flex-direction: column;
    list-style-position: inside;
    padding-left: 0;
}

li {
    padding: 10px 0 10px;
    padding-left: .5em;
    color: rgba(250, 250, 250);
}

::marker {
    color: rgba(250, 250, 250, 1);
    font-size: 1em;
    content: '\f522';
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
}

li:nth-child(odd) {
  background-color: red;
}

li:nth-child(odd)::marker {
    color: rgba(0, 0, 0);
}

<body>
    <ul>
        <li> 2 </li>
        <li> 3 </li>
        <li> 5 </li>
        <li> 7 </li>
        <li> 8 </li>
    </ul>
</body>

但我建议您使用伪元素 before 而不是 :marker 因为 :marker 属性不支持 safari 浏览器

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

如果要使用伪元素可以参考下面的例子

body {
    margin: 0;
    padding: 0;
} 
ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-left: 0;
}

li {
    padding: 10px 0 10px;
    padding-left: .5em;
    color: rgba(250, 250, 250);
}

li::before {
    color: rgba(250, 250, 250);
    font-size: 1em;
    content: '\f522';
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
}

li:nth-child(odd) {
  background-color: red;
}

li:nth-child(odd)::before {
    color: rgba(0, 0, 0);
}

<body>
    <ul>
        <li> 2 </li>
        <li> 3 </li>
        <li> 5 </li>
        <li> 7 </li>
        <li> 8 </li>
    </ul>
</body>

Answer 3

您可以继续使用标记，但 CSS 不接受标记的背景样式，但我们可以另外在奇数 li 元素上放置一个伪 before 元素，这些元素与 li 具有相同的高度但位于向左。

此代码段为其提供了较大的宽度，而不是尝试进行计算，因为只有 ul 本身内的部分才可见。

注意：此代码段将 ul 放入容器中只是为了给它一个背景并定位它。

.container {
  background-color: rgb(88, 88, 88);
  width: 50vw;
  position: relative;
  left: 20vw;
}

ul {
  display: flex;
  flex-direction: column;
}

li {
  padding: 10px 0 10px;
  padding-left: .5em;
  color: rgba(250, 250, 250);
}

::marker {
  color: rgba(250, 250, 250);
  font-size: 1em;
  content: 'M';
  /* PUT \f522 HERE */
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
}

li:nth-child(odd) {
  background-color: rgba(250, 250, 250, 0.4);
  position: relative;
}

li:nth-child(odd)::before {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: -100vw;
  width: 100vw;
  background-color: rgba(250, 250, 250, 0.4);
}

li:nth-child(odd)::marker {
  color: rgba(0, 0, 0);
}

<div class="container">
  <ul>
    <li> 2 </li>
    <li> 3 </li>
    <li> 5 </li>
    <li> 7 </li>
    <li> 8 </li>
  </ul>
</div>

Flex <ul> 其中每个 <li> 是一个框，背景颜色不会占满 space

Flex <ul> where each <li> is a box, background color won't take full space

html

css

html-lists

background-color

listitem