如何使用 CSS 在输入元素后添加换行符？答案

【问题标题】：How to add line break after input element with CSS?如何使用 CSS 在输入元素后添加换行符？
【发布时间】：2015-04-30 14:58:35
【问题描述】：

我正在使用一项服务，它返回带有一系列标签和输入的动态 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 来实现？

【问题讨论】：

标签： html css pseudo-element

【解决方案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" />

【讨论】：

是否可以使用固定宽度的标签，以便我们可以将标签文本向右对齐，如捕获中所示？
我建议添加额外的标记来做到这一点，即将字段包装到<div>标签中，这里是jsfiddle.net/gxvd50cy的快速示例
非常感谢您提到替换元素没有伪元素。我检查了许多使用 CSS 添加换行符的示例，试图找出它为什么不起作用，直到最终登陆这个页面。如果表单上没有使用标签，可以在输入元素之间插入一个 span 元素来实现换行。

【解决方案2】：

也许是这样的

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

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

【讨论】：