如何在 CSS 的输入元素后添加换行符？

Question

我正在使用 returns 动态 HTML 具有一系列标签和输入的服务，例如

input:after {
  content: "\a";
  white-space: pre;
}

<label for="username">Username</label>
<input type="text" id="username" name="username" />

<label for="country">Country</label>
<input type="text" id="country" name="country" />

我希望表格的格式如下：

但是不行。用 div 包围标签和输入是不可能的，因为这是服务返回给我的动态 HTML。

知道如何仅通过 CSS 实现这一点吗？

Answer 1

替换的元素包括<img>、<object>、<input>和<textarea>... 没有 :before 和 :after 伪元素。

作为解决方法，您可以在 <label> 元素上设置换行符。

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

<label for="username">Username</label>
<input type="text" id="username" name="username" />

<label for="country">Country</label>
<input type="text" id="country" name="country" />

Answer 2

也许是这样

label, input {
    display: inline-block;
}
label {
    width: 20%
}
input {
    width: 70%
}

根据需要调整值。 http://jsfiddle.net/sj4jrkLq/3/

如何在 CSS 的输入元素后添加换行符？

How to add line break after input element with CSS?

html

css

pseudo-element