细节元素似乎忽略了显示弹性或网格？

Question

这对我来说似乎很奇怪。您可以看到我们有一个简单的 details 元素，所有权利都应该水平运行。但事实并非如此。 grid 似乎也不起作用。

为什么？我在规范中没有看到任何关于这些元素的布局模型有任何不同的内容。

details {
	display: flex;
	flex-direction: row;
}

<details open>
	<summary>foo</summary>
	<div>bar</div>
	<div>baz</div>
</details>

Answer 1

您不能覆盖 details 元素的显示行为，但如果您的想法是让子元素出现在一行中，那么您可以在子元素上使用 display 或 float：

几个例子测试通过不同的浏览器使用前。

为视觉测试目的添加了边框、颜色和背景

details {clear:both;margin:2em;border:solid;color:red;}
details.flkid {overflow:auto;/* to deaal with floatting children*/}
summary {background:yellow;}
details > *{padding:0 1em;color:green}
details.flkid > *{float:left;}
details.ib > *{display:inline-block;}
details.tbcl > *{display:table-cell;}
/* and so on with inline-table,inline-flex,inline-grid */

<details class="flkid" open>
  <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
</details>
<details class="ib" open>
  <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
</details>
<details class="tbcl" open>
  <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
</details>

免责声明：以下 sn-ps 仅供参考，不应被视为解决方案，即使它似乎适用于少数浏览器：

div {
  display: grid;
  grid-template-columns: repeat(5, auto);
}

details {
  display: contents/* removed from the flow, so the grid div becomes the parent */
}

div {
  border: solid;
  margin: 2px
}

details[open]> :not(summary) {
  /* hide them from the flow except for summary */
  position: absolute;
  right: 100%;
}

div[class] {
  grid-row:  span 2;
}

<div>
  <details><!-- attribute open removed you can add it if you want it closed at first :( -->
    <summary>foo</summary>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div class>bazbazbazbazbazb</div>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div>baz</div>
    <div>bar</div>
    <div>baz</div>
  </details>
</div>

Answer 2

您可以通过添加下面的解决方案来解决它。

.flex {
  display: flex;
  flex-direction: row;
}

.flex>* {
  padding: 5px;
}

<details open>
  <summary>foo</summary>
  <div class="flex">
    <div>bar</div>
    <div>baz</div>
  </div>
</details>

Answer 3

尽管这个问题已经很老了，但我发现了一些非常老套的解决方法，可以将摘要和下拉内容放在一个水平轴上。需要注意的是 <summary> 元素的宽度应该是固定的，但在我的例子中（<summary> 是一个标志性的按钮，宽度和高度均为 24px）它完美地工作。因此，您将position: absolute 应用于<summary> 并通过填充调整所有其他内容。下面是我的案例，也许对某人有帮助。

/* .panel is my <details class="panel"> */
.panel { 
  position: fixed; /* just my case, may be relative or absolute */
  left: 0;
  top: 100px;
  padding: 34px 10px 10px 34px; /* top and left padding are 10px + <summary>'s size */
  background: #ddd;
}

.panel summary {
  margin: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute; /* this is the trick */
  left: 10px; /* imitate padding */
  top: 10px; /* imitate padding */
}

.panel summary::marker,
.panel summary::-webkit-details-marker {
  display: none;
  content: none; /* remove triangle (my case, it is button-like) */
}

.panel[open] {
  /* the 2nd part of the trick
   * remove button's size from top padding when details are open,
   * hence left padding remains the same.
   * so visually it looks like placed into one horizontal row
   * with details' dropdown content. 
   */
  padding-top: 10px;
}