仅使用 css 输入后换行

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;
}

使用这种样式会好一些，但流程仍然会中断 "anywhere"，具体取决于容器的宽度。如何使标签+输入成为一个块？（没有将它们都封装在一个容器中）

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

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

选项 #1，CSS-仅

如果您确实无法编辑 HTML，那么您可以将 white-space: pre; 和 content: "\a"; 应用于 label:before。参见 this updated JSFiddle。

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

<label>Application</label>
<input id="ApplicationName" />

<label>Foo</label>
<input id="Foo" />

<label>Junk</label>
<input id="Junk" />

选项 #2，HTML-仅

更好的解决方案可能是将 <input> 包裹在 <label> 中（这样做的另一个好处是您不需要使用 for 属性到 link 每个标签对应的输入！）。这是您的代码片段的有效 JSFiddle:)

input{
  width: 10em;
}

label{
  float: left; 
  clear: left;
}

<label>Application: <input id="ApplicationName" /></label>
        
<label>Foo: <input id="Foo" /></label>

<label>Junk: <input id="Junk" /></label>

Answer 2

你可以混合使用浮动和清除，有点老派但似乎适用于结构：

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;
}

<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>

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

div {
  width: 21em;
}

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>

仅使用 css 输入后换行

Line break after input using only css

html

css

carriage-return

选项 #1，CSS-仅

选项 #2，HTML-仅