html5 <summary>элемент с выравниванием текста справа

Question

Я пытаюсь использовать элементы html5 <details> и <summary> для представления разборного / расширяемого списка в стиле структуры, но не могу понять, как правильно отформатировать текст элемента <summary>.

Я хочу, чтобы текст был выровнен по правому краю, а отметка времени и блок ссылок были выровнены по правому краю.Я попытался сделать это, используя flexbox для линии и делая макет внутри flexbox.Это прекрасно работает для текста в <details> части.

Однако в итоговой строке все, что я пробовал, приводит либо к правильному форматированию текста (например, к тексту с подробностями), но и к строке нижетреугольник, или на той же линии, что и треугольник, но с выравниванием по левому краю.

Ниже приведен фрагмент, отображающий текст резюме, отформатированный правильно, но в новой строке.

.outline { background-color: #e0e0ff; margin: 30px; }
      /* Styling on <details> and <summary> below provides
         indentation for nested details blocks. */
    details > *:not(summary) { margin-left: 1em; }
    summary { display: list-item; }
    .title { display: flex; }
    .bsect { display: flex; }
    .ttext, .ts, .actions, .btext { border: 1px solid green; }
    .ttext, .btext { flex: 1; }
    .ts, .actions  { flex: 0; white-space:nowrap; }
    pre  { white-space: pre-wrap; margin: 0; font-size: 12pt }

A short title 2018-07-05 12:00 L1 L2

<!-- Following the summary are zero or more intermixed bsect and detail blocks -->

<!--flex container-->

Some multi-line
 body text.

2018-07-05 12:00

L1 L2

Изменение .title { display: flex; } на .title { display: inline-flex; } показывает другой результат (текст в той же строке, что и треугольник, но все выровнено по левому краю; can получаеттот же результат, используя <spans> с вместо <div> с):

    .outline { background-color: #e0e0ff; margin: 30px; }
      /* Styling on <details> and <summary> below provides
         indentation for nested details blocks. */
    details > *:not(summary) { margin-left: 1em; }
    summary { display: list-item; }
    .title { display: inline-flex; }
    .bsect { display: flex; }
    .ttext, .ts, .actions, .btext { border: 1px solid green; }
    .ttext, .btext { flex: 1; }
    .ts, .actions  { flex: 0; white-space:nowrap; }
    pre  { white-space: pre-wrap; margin: 0; font-size: 12pt }

A short title 2018-07-05 12:00 L1 L2

<!-- Following the summary are zero or more intermixed bsect and detail blocks -->

<!--flex container-->

Some multi-line
 body text.

2018-07-05 12:00

L1 L2

Какая магия необходима, чтобы получить правильно отформатированный текст в той же строке, что и треугольник?Я бы предпочел простое решение, которое по-прежнему использует flexbox, если это возможно, но если какой-то другой подход к достижению желаемых результатов лучше, это тоже хорошо.

Answer 1

Вот как я это сделаю:

summary {
  display: flex;
  align-items: center; /* added this to center the arrow. optional */
}
summary .title {
  flex-grow: 1;
}

.outline { background-color: #e0e0ff; margin: 30px; }
      /* Styling on <details> and <summary> below provides
         indentation for nested details blocks. */
    details > *:not(summary) { margin-left: 1em; }
    summary { display: list-item; }
    .title { display: inline-flex; }
    .bsect { display: flex; }
    .ttext, .ts, .actions, .btext { border: 1px solid green; }
    .ttext, .btext { flex: 1; }
    .ts, .actions  { flex: 0; white-space:nowrap; }
    pre  { white-space: pre-wrap; margin: 0; font-size: 12pt }
    
summary {
  display: flex;
  align-items: center;
}
summary .title {
  flex-grow: 1;
}

A short title 2018-07-05 12:00 L1 L2

<!-- Following the summary are zero or more intermixed bsect and detail blocks -->

<!--flex container-->

Some multi-line
 body text.

2018-07-05 12:00

L1 L2

---

Как указывал Алохчи, в FF стрелка не отображается, если в сводке нет display:list-item.

Oneспособ заставить его работать с display:list-item - использовать поплавки:

.title, .bsect {
   width: calc(100% - 1.08em);
   float: right;
}
details {
  overflow: hidden;
}

.outline { background-color: #e0e0ff; margin: 30px; }
      /* Styling on <details> and <summary> below provides
         indentation for nested details blocks. */
    details > *:not(summary) { margin-left: 1em; }
    summary { display: list-item; }
    .title { display: inline-flex; }
    .bsect { display: flex; }
    .ttext, .ts, .actions, .btext { border: 1px solid green; }
    .ttext, .btext { flex: 1; }
    .ts, .actions  { flex: 0; white-space:nowrap; }
    pre  { white-space: pre-wrap; margin: 0; font-size: 12pt }
    
.title, .bsect {
   width: calc(100% - 1.08em);
   float: right;
}
details {
  overflow: hidden;
}

A short title 2018-07-05 12:00 L1 L2

<!-- Following the summary are zero or more intermixed bsect and detail blocks -->

<!--flex container-->

Some multi-line
 body text.

2018-07-05 12:00

L1 L2

Не такой аккуратный и чистый, как flexbox, но работает.

Answer 2

Сделайте сводку гибким контейнером, затем добавьте flex:1 к .title, чтобы он занимал все пространство:

.outline { background-color: #e0e0ff; margin: 30px; }
      /* Styling on <details> and <summary> below provides
         indentation for nested details blocks. */
    details > *:not(summary) { margin-left: 1em; }
    .title { display: flex; }
    .bsect { display: flex; }
    .ttext, .ts, .actions, .btext { border: 1px solid green; }
    .ttext, .btext { flex: 1; }
    .ts, .actions  { flex: 0; white-space:nowrap; }
    pre  { white-space: pre-wrap; margin: 0; font-size: 12pt }
    
 summary {
   display: flex;
   align-items:center;
 }
 summary > .title {
  flex:1;
 }

A short title 2018-07-05 12:00 L1 L2

<!-- Following the summary are zero or more intermixed bsect and detail blocks -->

<!--flex container-->

Some multi-line
 body text.

2018-07-05 12:00

L1 L2

ОБНОВЛЕНИЕ

Для Firefox вы можете рассмотреть возможность добавления ширины к элементу inline-flex.Мы можем рассмотреть устройство em, чтобы оно работало с любым font-size:

.outline {
  background-color: #e0e0ff;
  margin: 30px;
}

details>*:not(summary) {
  margin-left: 1em;
}

.title {
  display: inline-flex;
}

.bsect {
  display: flex;
}

.ttext,
.ts,
.actions,
.btext {
  border: 1px solid green;
}

.ttext,
.btext {
  flex: 1;
}

.ts,
.actions {
  flex: 0;
  white-space: nowrap;
}

pre {
  white-space: pre-wrap;
  margin: 0;
  font-size: 12pt
}

summary>.title {
  width: calc(100% - 1.1em);
  margin-left: -0.3em;
}

A short title 2018-07-05 12:00 L1 L2

<!-- Following the summary are zero or more intermixed bsect and detail blocks -->

<!--flex container-->

Some multi-line
 body text.

2018-07-05 12:00

L1 L2

Краткое название 2018-07-05 12:00 L1 L2

Some multi-line
 body text.

2018-07-05 12:00 L1 L2