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