Как я могу добиться этого, используя css - PullRequest
Новая
       76

Как я могу добиться этого, используя css

0 голосов
/ 05 августа 2020

Это вид, который я пытаюсь достичь 

<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 первым и последним потомком, ничего не вышло. набор кнопок должен отображаться в виде группы, а первый и последний элементы должны быть округлены, в некоторых случаях группа кнопок может иметь только две кнопки или только одну. любой совет? 

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

Ответы [ 3 ]

1 голос
/ 05 августа 2020

Вы были на правильном пути. Это то, что вы ищете: 

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>

Edit Если вам не нужны классы first и last, это обходной путь

ПРИМЕЧАНИЕ: это работает только в данном c случае:

  • группа кнопок всегда в начале
  • есть только одна группа, никакой другой элементы между
  • на самом деле перемещает элемент 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>
1 голос
/ 05 августа 2020 

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>
1 голос
/ 05 августа 2020

Хотите сгруппировать элементы списка независимо от того, сколько элементов доступно?

Думаю, это то, что вам нужно: 

.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>
...