Question

假设我有一个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}，谢谢你指出来。

Answer 1

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

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

label, input {
    float: left;
}

label {
    clear: left;
}

......这里的a more polished jsFiddle示范礼貌由Tim Medora提供

Answer 2

如果您可以使用:before：

，这是一种非显而易见的方法

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

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

Answer 3

假设我无法更改HTML代码。我怎么能这样做 CSS？

执行此操作的简单方法是将每个标签/输入对包装在div（或其他块元素或设置为块元素的元素）中。但是，如果您无法更改HTML ...

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

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

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

Answer 4

您的错误陈述inline: block;应该display: inline;或display: inline-block;或display: block;这样display应该定义。我认为你需要学习css，然后去w3school或在谷歌搜索css教程，或许你可能错误地放置了inline: block;。对于您的问题，您需要将display: block;定义为其他答案。

Answer 5

只是简单地使用<br />但是在你的情况下，除了在你的元素中使用float宽度之外，使用float只是简单的使用100%

以下示例使用<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"/>

使用float;

float:left;
width:100%;

如何通过CSS“打破线”？

5 个答案: