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

您可以使用伪元素#define MAGIC_MACROS(n) \ void vec##(n-1)##_from_vec##n##(vec##(n-1) res, vec##n from);创建左侧颜色

请注意，您使用的::before作为div的直接子项无效，因此我将其删除了

＆＃13;

ul

＆＃13;

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;
}

＆＃13;

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

＆＃13;

border

＆＃13;

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;
}

＆＃13;

Answer 2

你可以使用线性渐变，只需将渐变的两个值放在同一点上（例如：gray 10%, black 10%）所以他们在那时分裂了背景。

旁注：您还应该移除div代码周围的li代表，因为它们在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中使用双背景颜色和以第二个背景颜色元素为中心的文本？

2 个答案: