我如何使用 css 实现此目的

Question

This is look I'm trying to achive

<ul>
    <li class="btn">A</li>
    <li class="btn" hidden>B</li>
    <li class="btn" hidden>C</li>
    <li >D</li>
    <li >E</li>
</ul>

也可以这样

<ul>
    <li class="btn">A</li>
    <li class="btn" hidden>B</li>
    <li class="btn">C</li>
    <li >D</li>
    <li >E</li>
</ul>

还有这个

<ul>
    <li class="btn">A</li>
    <li class="btn">B</li>
    <li class="btn">C</li>
    <li >D</li>
    <li >E</li>
</ul>

我试过 css 第一次和最后一次 child 它没有用。按钮集需要作为一个组出现，第一个和最后一个元素需要四舍五入，在某些情况下，按钮组可能只有两个按钮，或者只有一个。有什么建议吗？

ul li.btn:first-child {
    padding-left: 7px;
    border-radius: 50px 0px 0px 50px;
}

ul li.btn:last-child {
    padding-right: 7px;
    border-radius: 0px 50px 50px 0px;
}

Answer 1

不管可用的项目有多少，都要对列表项目进行分组吗？

我想这就是你需要的：

.group,
.list {
  display: flex;
  align-items: center;
}

.list>div:not(.group) {
  padding: 5px;
}

.group>div {
  padding: 5px;
  border: 1px solid #ccc;
}

.group>div:first-child {
  border-radius: 5px 0 0 5px;
}

.group>div:last-child {
  border-radius: 0 5px 5px 0;
}

<div class="list">
  <div class="group">
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>
  <div>D</div>
  <div>E</div>
  <div class="group">
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>
  <div>D</div>
  <div>E</div>
</div>

Answer 2

你走在正确的轨道上。这就是您要找的：

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

li {
  padding: 16px;
}

li.group {
  background-color: lightgray;
}

li.first {
  border-radius: 50% 0 0 50%;
}

li.last {
  border-radius: 0 50% 50% 0;
}

<ul>
  <li class="group first">A</li>
  <li class="group">B</li>
  <li class="group">C</li>
  <li class="group">D</li>
  <li class="group last">E</li>
  <li>F</li>
  <li>G</li>
</ul>

编辑如果您不想要 first 和 last class，这是一个解决方法

注意：这仅适用于这种特定情况：

按钮组总是在开头
只有一组，中间没有其他元素
这实际上将元素B移到了后面

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

li {
  padding: 16px;
}

li.group {
  background-color: lightgray;
}

li.group:first-child {
  border-radius: 50% 0 0 50%;
}

li.group~.group~.group {
  border-radius: 0;
  order: 0;
}

li.group~li.group {
  border-radius: 0 50% 50% 0;
  order: 1;
}

li:not(.group) {
  order: 2;
}

<ul>
  <li class="group">A</li>
  <li class="group">B</li>
  <li class="group">C</li>
  <li class="group">D</li>
  <li class="group">E</li>
  <li>F</li>
  <li>G</li>
</ul>

Answer 3

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

li {
  padding: 16px;
}

li.btn {
  background-color: lightgray;
}

ul li.btn:first-child {
  border-radius: 50% 0 0 50%;
}

ul li.btn:last-child {
  border-radius: 0 50% 50% 0;
}

<ul>
    <li class="btn">A</li>
    <li class="btn" hidden >B</li>
    <li class="btn">C</li>
    <li >D</li>
    <li >E</li>
</ul>

我如何使用 css 实现此目的

How can i achieve this using css

css

sass

less