一個CSS的挑戰

-1

在此網頁：http://devfiles.myopera.com/articles/11682/3d-transforms-rotate3d.html 一個CSS的挑戰

有人能解釋爲什麼<input>定位低於<label>，而不是在<label>元素的吧？

我嘗試將<input>更改爲兩個<span>，第一個跨度位於同一行上，第二個跨度位於下方的行上。這真有趣。

我試圖在[real-time HTML editor]上重現這種效果，但沒有成功。

你能解釋一下哪個CSS規則會導致這個有趣的效果嗎？

來源

2013-10-05 While Loop

如果您打算將您的問題題爲「CSS挑戰」，這是一個非常難以開頭的標題，這意味着您正在挑戰其他人回答。因此，發佈你自己的答案，就能打敗這樣的挑戰。 – BoltClock

如果您給段落標籤的寬度足以容納這兩個項目，它們將顯示您希望他們的方式。

來源

2013-10-05 00:33:29

我質疑你接受段落標籤來代表文本以外的任何內容。 – ShadowCat7

@ ShadowCat7 - 如果您查看[p元素的HTML5規範]（http://www.w3.org/html/wg/drafts/html/master/grouping-content。html＃the-p-element）第一個例子包含幾個p元素的實例，它們只包含標籤和輸入框。 – Alohci

@ ShadowCat7 - 我當然不會在這種情況下使用段落標籤。試圖幫助回答問題，而不是教授最佳實踐。 –

如果label在input元素之前或之後都沒關係。但是label允許for屬性，您可以在其中指定綁定到哪個表單元素label。

喜歡這裏：

<form action="."> 
    <label for="male">Male</label> 
    <input type="radio" name="sex" id="male" value="male"><br> 
    <label for="female">Female</label> 
    <input type="radio" name="sex" id="female" value="female"><br> 
    <input type="submit" value="Submit"> 
</form>

編輯：

如果你想有label和input含p必須更廣泛的同一條線上。

來源

2013-10-05 00:37:28 Michal

這已經在他的HTML中：' x 」 – ShadowCat7

這是p { display:inline-block; }設置。這會導致元素收縮包裝內容。這將元素的線框寬度限制爲它包含的最寬的不可破解框，這是輸入元素。顯然，由於輸入元素填充整行，因此標籤文本必須顯示在單獨的行上。

來源

2013-10-05 02:00:12 Alohci

我發現無論他們是<p>標籤還是<div>標籤，<label>標籤或其他標籤，都沒關係。

<div style="background:yellowgreen;display:inline-block;"> 
     <span style="display:inline-block;margin-left:5%">Good </span> 
     morning, John! 
    </div>

外內聯塊元件的寬度被計算爲只適合內的最長行，但沒有采取內直列塊元件的邊緣考慮汽車。

實際佈局發生時，會考慮內嵌塊元素的邊距。如果它包含左/右邊距，則最長的線不適合一行。然後纏繞長線發生。

所以魔法是： inline-block + [inline-block + margin-left/right]。

對於問題中提到的網頁，將<input>標籤換行顯示在段落的新行中。

來源

2013-10-05 02:29:35

一個CSS的挑戰

回答

相關問題