3

假设我有一个呈现如下内容的 HTML 页面：

labelA [___INPUT-TEXT____] labelB [___INPUT-TEXT____]

但是，我想在第二个标签上“打破界限”，例如：

labelA [___INPUT-TEXT____]
labelB [___INPUT-TEXT____]

假设我无法更改 HTML 代码。我怎样才能用 CSS 做到这一点？

这是一个例子：

<html><head><style>
#labelA { display:block; }
#labelB { display:block; }
</style></head>
<body>
<label for="ia" id="labelA">labelA</label><input id="ia" type="text"/>
<label for="ib" id="labelB">labelB</label><input id="ib" type="text"/>
</body></html>

任何帮助表示赞赏。

干杯，

编辑：我的意思是 ，{ display: block; }而不是{inline:block}，感谢您指出。

4

5 回答 5

4

使用display: block;代替，inline: block;我认为它应该做你想要的。

编辑没有仔细阅读您的问题。如果要将标签和文本输入组合在一起，可以使用以下内容：

label, input {
    float: left;
}

label {
    clear: left;
}

...这是一个更精致的 jsFiddle演示，由 Tim Medora 提供

于 2013-03-30T04:53:15.907 回答
3

如果您可以使用，这是一种不明显的方法:before：

#labelB:before {
    white-space: pre;
    content: '\A';
}

http://jsfiddle.net/userdude/9AkMu/

于 2013-03-30T04:57:35.923 回答
0

假设我无法更改 HTML 代码。我怎样才能用 CSS 做到这一点？

最简单的方法是将每个标签/输入对包装在一个div（或其他块元素，或样式为块元素的元素）中。但是，如果您无法更改 HTML...

演示：http: //jsfiddle.net/bdWRV/

#labelB:before{ content: ""; display: block; }

这适用于 Chrome 25、Firefox 和 IE 9/10。在我看来，这是一种黑客行为。充其量，这并不理想。

于 2013-03-30T04:58:21.800 回答
0

You have placed wrong statement inline: block; this should be display: inline; or display: inline-block; or display: block; like this display should be defined. I think you need to learn css more then go to w3school or search for css tutorial in google or perhaps may be you have placed inline: block; mistakenly. For your question, you need to define display: block; is okay as other answers.

于 2013-03-30T06:01:56.920 回答
0

just simple use <br /> but in your case, just simple used float using float is not guarantee unless you use 100% width in your element

below example using <br />

<label for="ia" id="labelA">labelA</label><input id="ia" type="text"/><br />
<label for="ib" id="labelB">labelB</label><input id="ib" type="text"/>

using float;

float:left;
width:100%;
于 2013-03-30T09:52:17.603 回答