如何通過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「斷線」？

回答

相關問題