如何通过CSS“断线”？

让我们假设我有呈现类似波纹管一个HTML页面：如何通过CSS“断线”？

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}，谢谢指点出来。

来源

2013-03-30 Rafa

'display：block' should fix this，假设你没有浮动。 – Brad

@brad，我在想同样的事情，'clear：left'会修正'float'。 –

使用display: block;而不是inline: block;我认为它应该做你想做的。

编辑没有仔细阅读你的问题。如果你想组的标签和文本输入一起上线，您可以使用类似：

label, input { 
    float: left; 
} 

label { 
    clear: left; 
}

...这是蒂姆梅多拉的a more polished jsFiddle示范礼貌

来源

2013-03-30 04:53:15 metadept

+1 - 这是一个版本的元素间隔和垂直对齐文本：http://jsfiddle.net/bdWRV/1/ –

我试着在这篇文章中的所有答案，这一个似乎是最好的选择我的情况。谢谢。 – Rafa

这里有一个非显而易见的方式，如果您可以使用:before：

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

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

来源

2013-03-30 04:57:35

有趣！请你提供内容的描述：'/ A';任何网站。 –

'\ A'只是一个在CSS中工作的'newline'字符（'\ n'不会）。 –

\ n是“新行”，是什么意思？ –

假设我无法更改HTML代码。我如何使用 CSS？

的简单的方法来做到这一点是只包裹每个标签/输入对在div（或其它块元件，或元件风格作为块元素）。不过，如果你不能改变的HTML ...

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

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

此作品在Chrome 25，Firefox和IE的9/10。在我看来，这是一种破解。充其量，这并不理想。

来源

2013-03-30 04:58:21

谢谢蒂姆，这是一个方便的选项。但是，在我的特殊情况下，float似乎是更好的选择，因为它具有更好的兼容性。 – Rafa

你已经把错误的声明inline: block;这应该是display: inline;或display: inline-block;或display: block;这样display应该被定义。我认为你需要学习更多的CSS然后去w3school或在谷歌搜索css教程或者可能是你错误地放置了inline: block;。对于你的问题，你需要定义display: block;作为其他答案没关系。

来源

2013-03-30 06:01:56

对，我错误地放置了“内联：块”[是的，我需要学习更多的CSS，我是一个后端开发者后续:)]。我已经尝试过几种组合，但是无法实现我的目标......谢谢 – Rafa

只是简单的使用<br />但在你的情况下，只是简单的用float用浮子不能保证，除非你在使用浮动使用<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"/>

你的元素

下面的例子使用100%宽度;

float:left; 
width:100%;

来源

2013-03-30 09:52:17 jhunlio

如何通过CSS“断线”？

回答

相关问题