在 CSS 中，我怎样才能拥有双重背景颜色和以第二个背景颜色元素为中心的文本？

Question

我想做类似这张图片的事情： ul menu li tags

我应该为每个元素使用双标签吗？例如：

<ul class="menu">
    <div class="outside"><li class="inside"><a href="#">Firefox</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Chrome</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Opera</a></li></div>
</ul>

或者双 li 标签？我试过 CSS 线性渐变属性，但只有一个标签，因为我想得到与图像中相同的结果，在我看来必须有两个不同的具有不同背景颜色的标签和具有黑色的标签只需要具有更高的 z-index 属性.

我很新，在设计和造型方面有点差劲，所以非常感谢您的帮助！

Answer 1

您可以使用伪元素::before创建左侧彩色边

请注意，您使用的 div 作为 ul 的直接子代是无效的，所以我删除了它们

ul.menu {
  display: flex;
  list-style: none;
  padding: 0;
}
ul.menu li {
  margin: 0 5px;
}
ul.menu a {
  position: relative;
  display: inline-block;
  width: 120px;
  background: black;
  color: white;
  padding: 4px 0 4px 10px;
  text-decoration: none;
  text-align: center;
}
ul.menu a::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: gray;
  width: 10px;
}

<ul class="menu">
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Opera</a></li>
</ul>

或左border

ul.menu {
  display: flex;
  list-style: none;
  padding: 0;
}
ul.menu li {
  margin: 0 5px;
}
ul.menu a {
  position: relative;
  display: inline-block;
  width: 120px;
  background: black;
  color: white;
  padding: 4px 0;
  text-decoration: none;
  text-align: center;
  border-left: 10px solid gray;
}

<ul class="menu">
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Opera</a></li>
</ul>

Answer 2

您可以使用线性渐变，只需将两个渐变值放在同一点即可
（例如：gray 10%, black 10%) 所以他们在那个点分割了背景。

旁注：您还应该删除 li 标签周围的外部 div，因为它们在 ul 内部无效元素.

ul.menu {
  list-style: none;
  display: flex;
}

ul.menu li.inside {
  background: linear-gradient(to right, gray 10%, black 10%);
  margin-left: 5px;
  padding: 5px 5px 5px 20px;
  width: 120px;
  display: block;
  box-sizing: border-box;
}

li a {
  color: white;
}

<ul class="menu">
  <li class="inside"><a href="#">Firefox</a></li>
  <li class="inside"><a href="#">Chrome</a></li>
  <li class="inside"><a href="#">Opera</a></li>
</ul>

在 CSS 中，我怎样才能拥有双重背景颜色和以第二个背景颜色元素为中心的文本？

How can I have, in CSS, a double background color and the text centered in the second background color element?

html

css

menuitem

html-lists