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

时间:2015-04-30 14:58:36

标签: html css css3 pseudo-element

我正在使用一种服务,该服务通过一系列标签和输入返回动态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" />

我希望表单格式如下:

enter image description here

但它不起作用。不能使用div包围标签和输入,因为这是由服务返回给我的动态HTML。

任何想法如何只能通过CSS实现?

2 个答案:

答案 0 :(得分:11)

替换的元素包括<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" />

答案 1 :(得分:0)

也许是那样的

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

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