html5< summary>具有一些右对齐文字的元素 [英] html5 <summary> element with some text right justified

问题描述

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

I am trying to use html5's <details> and <summary> elements to present a collapsible/expandable outline-style list but can't figure out how to get the <summary> element text formatted correctly.

我希望左对齐的文字和时间戳 和正确的链接块.我试图做到这一点 在行中使用flexbox并在内部进行布局 flexbox.这对于<details>部分中的文本很好用.

I want the text left justified and the timestamp and block of links right justified. I tried to do this by using a flexbox for the line and doing the layout inside the flexbox. This works fine for the text in the <details> part.

但是，在摘要行中，我尝试过的所有结果 要么是格式正确的文本(例如详细信息文本) 但在三角形下方的线上，或与三角形相同的线上 三角形，但剩下的一切都是合理的.

However, on the summary line everything I've tried results in either the text being properly formatted (like the details text) but on a line below the triangle, or on the same line as the triangle, but with everything left justified.

以下是显示格式正确的摘要文本的摘要 但换行了.

Here is a snippet of showing the summary text formatted correctly but on a new line.

.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而不是<div> s获得相同的结果):

Changing the .title { display: flex; } to .title { display: inline-flex; } shows the other result (text on same line as triangle but everything left-justified; can gets the same result using <spans>s instead of <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>

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

What magic is needed to get the properly formatted text on the same line as the triangle? I'd prefer a simple solution that continues to use flexbox if possible but if some other approach to achieving the wanted results is better, that's fine too.

推荐答案

这就是我要这样做的方式:

This is how I'd do it:

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中不会显示箭头.

As alohci pointed out, in FF the arrow is not displayed unless summary has display:list-item.

使其与display:list-item一起使用的一种方法是使用浮点数:

One way to make it work with display:list-item is using floats:

.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那样整洁干净，但是确实可以工作.

Not as neat and clean as flexbox, but does work.

这篇关于html5< summary>具有一些右对齐文字的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！