css - 您可以使用 HTML5 详细信息标签在右侧而不是在 下方打开一个描述框吗？

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

带有位置的示例...

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>