Как вертикально выровнять стрелку <details>с содержимым <summary>

Question

Я пытаюсь вертикально выровнять стрелку, которая идет с элементом <details>. Как вы можете видеть в демо ниже, меня беспокоят две вещи:

1. вторая строка <summary> не начинается в том же горизонтальном положении, что и первая строка.

2. текстовое содержимое summary не выровнено по вертикали со стрелкой.

details {
  font-size: 30px;
}

<details>
  <summary>Show more, you can click here on the summary's label to fold down the hidden menu</summary>
  Nothing to see here.
</details>

Текущее состояние :

Желаемый результат:

summary {
  font-size: 30px;
  display: inline-block;
}

<details>
  <summary>
    <div>
      Show more, you can click here on the summary's label to fold down the hidden menu
    </div>
  </summary>
  Nothing to see here.
</details>

Я попытался обернуть итоговое содержимое внутри элемента div, задав для его свойства значение inline-block, но это только решило точку 1 .

Answer 1

Вы также можете положиться на flexbox и сохранить поведение по умолчанию:

summary {
  font-size: 30px;
  display: flex;
  align-items:center;
}
summary > div {
  width:100%;
}

<details>
  <summary>
    <div>
      Show more, you can click here on the summary's label to fold down the hidden menu
    </div>
  </summary>
  Nothing to see here.
</details>

Answer 2

Вы можете реализовать свою собственную складную систему. Но лучший способ - это немного взломать элементы details и summary, убрав стрелку по умолчанию и поместив новую с помощью псевдоселектора :before.

1. начать с скрытия стрелки по умолчанию :

   summary::-webkit-details-marker {
     display: none;
   }
   

2. , затем добавьте свои собственные стрелки с помощью свойства content

   закрыт

   summary:before {
     content: "►";
   }
   

   открыт:

   details[open] summary:before {
     content: "▼";
   }
   

3. добавить элемент обтекания div для нашего summary текста:

   Теперь наша структура выглядит так:

   <summary>
     ::before
     <div>
       Show more, you can click here on the summary's label to fold down the hidden menu
     </div>
   </summary>
   

4. нам нужно выровнять элемент ::before с элементом div:

   • установить width и margin на summary:before

   • установите summary > div s display на inline-block, чтобы выровнять два блока

   • пусть summary > div будет иметь оставшееся горизонтальное пространство с помощью функции CSS calc:

     summary > div {
       width: calc(100% - 50px); /* 50px is the space taken by summary::before */
     }
     

   • , чтобы выровнять два блока по горизонтали, просто установите vertical-align в middle

summary::-webkit-details-marker {
  display: none
}

summary > div {
  width: calc(100% - 50px);
  display: inline-block;
  vertical-align: middle;
}

details {
  font-size: 20px;
}

summary:before {
  content: "►";
  margin: 0px 10px 0 0;
  width: 20px;
}

details[open] summary:before {
  content: "▼";
}

<details>
    <summary><div>Show more, you can click here on the summary's label to fold down the hidden menu</div></summary>
    <div>Nothing to see here.</div>
</details>
<br>
<details>
    <summary><div>This is actually an even bigger summary text, and it works! The arrow on the left is perfectly positioned. Show more, you can click here on the summary's label to fold down the hidden menu</div></summary>
    <div>Nothing to see here.</div>
</details>