Question

我有一个带有很多标签+输入的HTML

<label>Application</label>
<input id="ApplicationName" />
...
<label>Foo</label>
<input id="Foo" />
...
<label>Junk</label>
<input id="Junk" />

我强制宽度添加一些一致性

label {
    display: inline-block;
    width: 10em;
}
input {
    width: 10em;
}

使用这种样式它会更好但是流量仍然会“随处”破坏，具体取决于容器的宽度。如何将标签+输入设为块？（不将它们都封入容器中）

另一个可接受的解决方案是 add a virtual carriage return after each input或
before each label。
我之后没有成功，因为输入标签后不支持。
我也不能把它放在前面，因为

label::before {
    content: "\A";
    white-space: pre;
}

与标签{display：inline-block}无法很好地混合

label {
    display:inline-block;
    width:10em;
}

input {
    width:10em;
}

<div>
    <label>namespace</label>
    <input id="namespace" />
            
    <label>Application</label>
    <input id="application" />
            
    <label>Description</label>
    <input id="Description" />
            
    <label>Author</label>
    <input id="Author" />
</div>
resize the window to exhibit unwanted behaviour

Answer 1

你可以使用浮动和清理的混合物，有点旧学校，但似乎适用于结构：

＆＃13;

label {
  display: block;
  width: 10em;
  float: left; /* makes the element act like inline block */
  clear: left; /* clears any left floats so before so this should start on new line */
}

input {
  width: 10em;
  float: left;
}

＆＃13;

<div>
  <label>namespace</label>
  <input id="namespace" />

  <label>Application</label>
  <input id="application" />

  <label>Description</label>
  <input id="Description" />

  <label>Author</label>
  <input id="Author" />
</div>

＆＃13;

或者你可以给父容器一个宽度来强制内容到下一行：

＆＃13;

div {
  width: 21em;
}

label {
  display: inline-block;
  width: 10em;
}

input {
  width: 10em;
}

＆＃13;

<div>
  <label>namespace</label>
  <input id="namespace" />

  <label>Application</label>
  <input id="application" />

  <label>Description</label>
  <input id="Description" />

  <label>Author</label>
  <input id="Author" />
</div>

＆＃13;

输入后仅使用css进行换行

1 个答案: