您可以使用HTML5详细信息标签在右侧而不是下方打开描述框吗<li>？

Question

我一直在寻找一种将详细信息标签用作可扩展列表的方法，但是我希望它向右打开，比如div，作为一个单独的"窗口"。这样做可能吗？或者有更好的方法可以在 angular2 中做到这一点？

感谢所有建议！

代码：

<ul class="list-group">
    <li class="list-group-item" *ngFor="let todo of todos | items: items">
      <details>
        <summary>
          {{todo.text}}
        </summary>
        <p>
          Hey, this is a paragraph
        </p>
      </details>
    </li>
  </ul>

Answer 1

您可以使用position: absolute或float: right

示例与position...

p {
  background: pink;
  position: absolute;
  top: 0;
  right: 0;
  padding: .5rem;
  max-width: 50%;
}

<ul class="list-group">
  <li class="list-group-item" *ngFor="let todo of todos | items: items">
    <details>
      <summary>
        {{todo.text}}
      </summary>
      <p>
        Hey, this is a paragraph   Hey, this is a paragraph Hey, this is a paragraph Hey, this is a paragraph Hey, this is a paragraph
      </p>
    </details>
  </li>
</ul>