頁面樣式：使用浮點數的替代方法

每當我想將元素放在一起時，我傾向於使用浮點數。像使用兩個浮動的div：留在它們上面。我想知道這是最好的策略還是有更好的選擇。頁面樣式：使用浮點數的替代方法

這是一個示例代碼

<div> 
    <div style="float:left"> 
    <p>Alphabet</p> 
    <select style="width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
    </div> 
     <div style="float:left; margin-left:20px;"> 
     <p>Number</p><input type="text" value="123" /> 
     </div> 
</div>

我還能在上面的代碼提高。那<p>確實是必需的，或者我應該使用其他標籤。

A Live Example

來源

2011-08-29 Amber

使用例如style="display:inline-block"

而關於你的第二個問題：

<div style="display:inline-block"> 
    <label for="alphabet" style="display:block;">Alphabet</label> 
    <select id="alphabet" style=" width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
</div>

使用label是更多的語義，並應用display:block它，使得它橫跨整個寬度。

也儘量不要使用內聯的CSS。

來源

2011-08-29 07:03:41 Gidon

是IE7及更高版本支持的內嵌塊嗎？ – Amber

是的，但你可能需要應用黑客：http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/ – Gidon

內聯CSS是一個例子..是的，我避免它 – Amber

另一種方法可以是使用display:inline-block;以及使用例如this例子中的標籤。

標籤非常適用於顯示能力有限的設備，特別是手持設備，因爲點擊它們將激活指定的字段。你應該總是使用它們。

無論如何，我沒有看到沒有使用花車的重點。如果您知道如何正確使用它們，它們非常棒，並且在所有瀏覽器中都是兼容的。

來源

2011-08-29 07:04:37

使用float: left;。在這種情況下沒有理由不使用它。

這是非常好的支持和「內聯塊」會給你麻煩，除非你爲舊版瀏覽器破解它..當你可以一直使用float: left;。

來源

2011-08-29 07:36:02 Joonas

問題是我必須使用一個清晰的：無論如何..無論如何周圍呢？ – Amber

@Amber如果我使用清除我的div後面的父div現在渲染不正確 – Joonas

？ – Amber

頁面樣式：使用浮點數的替代方法

回答

相關問題