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 }

<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; }会显示其他结果（与三角形在同一行上的文本，但所有内容都左对齐；可以使用<spans> s而不是{{1 }} s）：

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

要获得相同格式的正确文本，需要什么魔术线为三角形？我希望继续使用一个简单的解决方案在可能的情况下使用flexbox，但如果要使用其他方法来实现想要的结果更好，那也很好。

Answer 1

为摘要添加一个伸缩容器，然后将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>

Answer 2

这就是我要做的：

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

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

正如阿洛希（Alohci）所指出的那样，除非摘要中有display:list-item，否则FF中不会显示箭头。

使其与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;
}

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

不如flexbox整洁干净，但确实可以工作。

带有正确文本的html5 <summary>元素

2 个答案: