相关疑难解决方法(0)

我试图<button>用flexbox的中心元素的中心元素justify-content: center.但Safari并不以它们为中心.我可以将相同的样式应用于任何其他标记,并且它按预期工作(请参阅<p>-tag).只有按钮左对齐.

尝试Firefox或Chrome,您可以看到差异.

是否有任何用户代理样式我必须覆盖？或者这个问题的任何其他解决方案？

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

还有一个jsfiddle:http: //jsfiddle.net/z3sfwtn2/2/

我试图将一个fieldset孩子伸展到100%,但是孩子(ul)太大而且出现了一些溢出(在我的情况下被削减).

如何将fieldset孩子伸展到100%,但没有溢出？

fieldset {
  height: 300px;
  overflow: hidden;
}
ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
    background-color: #ffffbb;
}

<fieldset>
  <legend>How to stretch child</legend>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
  </ul>
</fieldset>

以防万一这里也是外部小提琴:小提琴中的例子.

编辑:

将高度设置为特定像素是必要的.我从C#windows应用程序通过WebSocket获得表单布局(设计).每个组件都是绝对位置,具有与C#应用程序完全相同的属性.这意味着,左,上,宽度和高度.

这对我来说似乎很奇怪。你可以看到我们有一个简单的 details 元素，它应该是水平运行的。但事实并非如此。grid似乎也行不通。

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

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

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

问题：对表单元素进行分组

我有一个HTML表单，在几个地方，单个控件由几个输入组成。一个示例是一组单选按钮。

我想对这些输入及其标签进行显式分组，以便屏幕阅读器（除了通过将它们对齐在一行上的视觉表示之外）还能够理解并宣布这种关系。

例如，假设我有一个像这样的控件：

<div class="control">
  <div class="control-label">Type</div>
  <div class="control-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

标准解决方案问题：字段集样式问题

fieldset元素，它的孩子legend似乎正是为此而生的（在下面的示例中使用）。

问题是，fieldset和legend元素不能像正常的元素风格（一些讨论这件事），与时下除了在Firefox中这是不可能对准他们利用Flexbox的单行线，其中我的布局需要。

<fieldset class="control">
  <legend class="control-label">Type</legend>
  <div class="form-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</fieldset>

问：是否有一些其他的方式？

这让我想知道是否有某种使用fieldset元素以外的可访问方式来将多个表单控件分组？

可能的解决方案：role="group"？

有一个“组”角色（在下面的示例中使用），可以添加到简单角色中div，看起来好像可以完成任务，但是没有明确说明它的功能等同于使用字段集。如果是的话，那我该如何标记该组中的一个元素以等效于legend？

<div …

关于CSS Grid的浏览器支持情况如何？

我环顾四周，很难理解有关兼容性的整个情况。

如果我转到可以使用，似乎几乎所有浏览器都支持它。但是，如果我转到Microsoft文档，情况会有所变化。

似乎几乎所有浏览器都支持Grid，但除Firefox外，它们都不支持所有功能。

然后，关于Edge，我得到的是它仅支持不再使用的旧规范，而当前正在进行更新。