Question

我在样式<fieldset>时遇到困难，<li> <label>foo</label> <input type='text'> </li> <li> <label>baz</label> <textarea></textarea> </li>是表单中的编号列表项。

我已经创建了一个表格，并将每个问题都设为有序列表中的一个项目，如下所示：

<label>

现在，我尝试为每个列表元素设置样式，以使每个列表编号和问题（<fieldset>元素）一起显示在一行上，而交互式小部件显示在下面的一行上。对于由内联元素组成的问题，这很容易，但是我遇到了与<fieldset>组合在一起的复选框和单选按钮的麻烦。

我删除了<legend>和list-style-position元素上的默认样式，以尝试使这些问题看起来像表单中的其他列表项。但是现在我得到了一种非常奇怪的行为，其中列表编号与底部输入选项（而不是标签）对齐。

更改<input>并没有帮助，而随意更改<label>或<ol>样式似乎也没有影响。我尝试将display: flex更改为<li>并以此做一些事情，但是那也没做。

已经起作用了，所有的字段集元素都被删除了，但是按钮和问题之间没有语义关系，我知道这对屏幕阅读器很重要。我敢肯定，我也可以摆脱所有的编号，但是我不想。在开始编写此表单之前，我已经进行了查找，没有什么可说的是<fieldset>中的嵌套元素是一个问题。

我发现this blog是public function login(Request $request) { $credentials = $request->only(['email', 'password']); try { if (!$token = JWTAuth::attempt($credentials)) { return response()->json(['error' => 'Unauthorized'], 401); } catch (JWTException $e) { // something went wrong return response()->json(['error' => 'could_not_create_token'], 500); } } return $this->respondWithToken($token); }样式的指南，但并没有帮助我解决问题。

这是一个小提琴，它演示了我的问题（Q1和Q3展示了我想要的效果；问题2出现了奇怪的样式问题）。

https://jsfiddle.net/ocfk23un/45/

基本上，我想解决这个问题，或者在放弃使用字段集之前想知道为什么会这样。

Answer 1

您应该继续使用所拥有的HTML，因为它在语义上是正确的。您只需要在vertical-align: top;样式中添加fieldset：

fieldset {
  display: inline;
  padding: 0;
  border: 0;
  vertical-align: top;
}

表单中列表项的样式

1 个答案: