css - html5 元素，其中一些文本右对齐

Question

我正在尝试使用 html5 的 <details>和 <summary>元素呈现可折叠/可展开的大纲样式列表，但无法弄清楚如何获得 <summary>元素文本格式化正确。

我想要文本左对齐和时间戳和右对齐的链接 block 。我试着这样做使用 flexbox 作为线条并在内部进行布局 flex 盒子。这适用于 <details> 中的文本部分。

但是，在摘要行上，我尝试过的所有结果文本格式正确(如详细信息文本)但在三 Angular 形下方的一条线上，或与三 Angular 形，但所有内容都左对齐。

这是显示格式正确的摘要文本的片段但换了一条线。

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

<div class="outline">
    <details id="b5750h35">
      <summary>
        <div class="title">
          <div class="ttext">A short title </div>
          <div class="ts">2018-07-05 12:00</div>
          <div class="actions">
            <a href="#">L1</a>
            <a href="#">L2</a>
            </div>
          </div>
        </summary>
      <!-- Following the summary are zero or more intermixed
           bsect and detail blocks -->
      <div id="b5750c32" class="bsect"><!--flex container-->
        <pre class="btext">Some multi-line
 body text.</pre>
        <div class="ts">2018-07-05 12:00</div>
        <div class="actions">
          <a href="#">L1</a>
          <a href="#">L2</a>
          </div>
        <!--more bsects or details go here -->
        </div><!--id="b5750c32"-->
      </details><!-- id="b5750h35" -->

    </div>

改变 .title { display: flex; }至 .title { display: inline-flex; }显示另一个结果(文本与三 Angular 形在同一行，但所有内容左对齐；使用 <spans> s 而不是 <div> s 可以获得相同的结果):

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

  <div class="outline">
    <details id="b5750h35">
      <summary>
        <div class="title">
          <div class="ttext">A short title </div>
          <div class="ts">2018-07-05 12:00</div>
          <div class="actions">
            <a href="#">L1</a>
            <a href="#">L2</a>
            </div>
          </div>
        </summary>
      <!-- Following the summary are zero or more intermixed
           bsect and detail blocks -->
      <div id="b5750c32" class="bsect"><!--flex container-->
        <pre class="btext">Some multi-line
 body text.</pre>
        <div class="ts">2018-07-05 12:00</div>
        <div class="actions">
          <a href="#">L1</a>
          <a href="#">L2</a>
          </div>
        <!--more bsects or details go here -->
        </div><!--id="b5750c32"-->
      </details><!-- id="b5750h35" -->

    </div>

需要什么魔法才能在同一页面上获得正确格式的文本线作为三 Angular 形？我更喜欢一个简单的解决方案尽可能使用 flexbox，但如果有其他方法可以实现想要的结果更好，这也很好。

Answer 1

使摘要成为一个 flex 容器，然后将 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;
 }

<div class="outline">
    <details id="b5750h35">
      <summary>
        <div class="title">
          <div class="ttext">A short title </div>
          <div class="ts">2018-07-05 12:00</div>
          <div class="actions">
            <a href="#">L1</a>
            <a href="#">L2</a>
            </div>
          </div>
        </summary>
      <!-- Following the summary are zero or more intermixed
           bsect and detail blocks -->
      <div id="b5750c32" class="bsect"><!--flex container-->
        <pre class="btext">Some multi-line
 body text.</pre>
        <div class="ts">2018-07-05 12:00</div>
        <div class="actions">
          <a href="#">L1</a>
          <a href="#">L2</a>
          </div>
        <!--more bsects or details go here -->
        </div><!--id="b5750c32"-->
      </details><!-- id="b5750h35" -->

    </div>

更新

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

<div class="outline">
  <details id="b5750h35">
    <summary>
      <div class="title">
        <div class="ttext">A short title </div>
        <div class="ts">2018-07-05 12:00</div>
        <div class="actions">
          <a href="#">L1</a>
          <a href="#">L2</a>
        </div>
      </div>
    </summary>
    <!-- Following the summary are zero or more intermixed
           bsect and detail blocks -->
    <div id="b5750c32" class="bsect">
      <!--flex container-->
      <pre class="btext">Some multi-line
 body text.</pre>
      <div class="ts">2018-07-05 12:00</div>
      <div class="actions">
        <a href="#">L1</a>
        <a href="#">L2</a>
      </div>
      <!--more bsects or details go here -->
    </div>
    <!--id="b5750c32"-->
  </details>
  <!-- id="b5750h35" -->

</div>

<div class="outline" style="font-size:25px;">
  <details id="b5750h35">
    <summary>
      <div class="title">
        <div class="ttext">A short title </div>
        <div class="ts">2018-07-05 12:00</div>
        <div class="actions">
          <a href="#">L1</a>
          <a href="#">L2</a>
        </div>
      </div>
    </summary>
    <!-- Following the summary are zero or more intermixed
           bsect and detail blocks -->
    <div id="b5750c32" class="bsect">
      <!--flex container-->
      <pre class="btext">Some multi-line
 body text.</pre>
      <div class="ts">2018-07-05 12:00</div>
      <div class="actions">
        <a href="#">L1</a>
        <a href="#">L2</a>
      </div>
      <!--more bsects or details go here -->
    </div>
    <!--id="b5750c32"-->
  </details>
  <!-- id="b5750h35" -->

</div>