浮動塊級元素：是否需要設置寬度，如果是，如何？

說我有文本框，下拉列表和提交按鈕。它們都是內聯元素。這意味着「正式」邊距，填充，寬度和高度屬性應該被忽略（實際上不是真的）。如果我要按照正確的方式將高度設置爲按鈕，我會寫一些類似display：block的東西，然後定義高度。但有一些塊級別元素會意外擴展的考慮因素，所以我最好將其寬度設置爲某個固定值。問題是我不知道它的寬度，因爲它可以在按鈕的文本上動態定義。浮動塊級元素：是否需要設置寬度，如果是，如何？

另一種情況：我希望通過<ul>和<li>創建一個菜單。我想讓它水平對齊，其中一些項目分組到左側，另外一些項目向右延伸。 <ul>和<li>都是塊級元素。由於我希望我的菜單能夠獲得所有可用的水平空間，因此要玩高度項目並將菜單項目推送到兩側，塊模式對我來說很好。我將使用float：left和float：right來完成任務。但是再次使用應該有點寬度菜單元素，因爲它們是塊元素。我不知道它們的寬度，因爲這些項目的文字可能會有所不同。但似乎所有東西都很好地表現出來。

我還沒有注意到任何內嵌元素都被強制呈現爲塊元素而不被浮動或寬度設置，或者與列表項例子有任何問題。無論當前版本如何，它在IE7，FF3，Opera 9和Safari中都可以正常工作。問題依然存在：我是否應該擔心這些內嵌塊元素或實際塊元素浮動，但沒有設置寬度或者只是保持原樣？我是否錯過了某些東西，還是僅僅是你不應該期待正確的那些東西？

來源

2009-01-02 user50855

說我有文本框，下拉列表並提交按鈕。它們都是內聯元素。這意味着「正式」邊距，填充，寬度和高度屬性應該被忽略（實際上不是真的）。如果我是去正確的方式來設置高度的按鈕，我會寫東西像顯示：塊，然後定義的高度。但有的考慮因素，塊級元素將自己擴大意外，所以我最好把它的寬度設置爲一些固定值。問題是我不知道它的寬度，因爲它可以動態定義在按鈕的文本上。

除非你指的是Internet Explorer's box model quirks，否則你不應該擔心意外擴大或收縮。只要你照顧normalizing for browser variation，你會沒事的。如果您在設計榮耀的過程中出現意想不到的副作用，那麼您需要對其進行調試，因爲這是您所面臨的程序員錯誤。 CSS可能很古怪，但對於大多數主流瀏覽器來說，95％的時間並不適合。另外5％我們不談論。

這就是我所理解你的問題：

你想飄來<li>的菜單，讓你有一個跨越視口（用戶看到的「在瀏覽器窗口」什麼的），以寬度的水平菜單始終是視口的整個寬度。

聽起來你正在考慮固定寬度的設計，當聽起來像是適合你的目的是流體寬度設計。這意味着您可以創建一個「有彈性」的設計，並根據用戶瀏覽器窗口的大小展開和收縮。如果您創建的設計預期在每個元素上設置像素寬度，則可能會找到維護流體寬度標題和導航的優雅方法，但具有固定寬度的主要內容區域。沒有完全重新設計，你可以找到一個快樂的媒介。 This walkthrough will likely be what you're looking for.如果您不熟悉行話並希望仔細看看這些想法，可以在這裏找到好的explanation of the terms fixed-width and fluid-width。

還有一個用於道路：

Setting a width on all floated elements不僅推薦，反而是CSS2標準按照W3C的一部分。

安吉麗娜

來源

2009-01-02 11:56:00

第二行的鏈接'正常化瀏覽器變化'被破壞。 – akash 2013-09-17 06:10:47

你變得有點過分強調我認爲:)

退房these links，特別是9.4，9.5和10.3。和ctrl -f「inline-block」

來源

2009-01-02 11:07:45 annakata

如果我們採用你提到的「官方」這一行，那麼生活很簡單，因爲我們不需要擔心寬度，高度和這些元素。

不要以爲像素完美的，不用擔心陳述的細節，遵循的標準，讓瀏覽器&其用戶定義樣式...

（只要它真的那麼直向前在「非官方」現實世界）

來源

2009-01-02 11:53:31 bochgoch

好吧，我想我的問題是沒有正確理解。如果我不設置浮動框的寬度會發生什麼？我無法設定，我不知道。因爲它取決於內容。所有的盒子會縮小到它們的內容寬度嗎？這是它在實踐中的工作方式。我對此感到滿意。有沒有官方確認這種行爲應該預期？

補充：我foudn這裏一些有趣的事情：http://www.webmasterworld.com/css/3811603.htm

我建議檢查的建議，更多的技術explanantion的差異，但簡單地說，花車的行爲CSS2（1998年）和CSS2之間變化.1（2005年的幾個月，然後是2007年）。根據css2，必須在浮點上設置寬度，而在ff3中看到的「縮小包裝」爲css2.1。這意味着在Jul＃/ 2007瀏覽器符合與他們的製造時間相關的建議時，他們將div＃容器擴展到整個視口寬度。（這不能解釋Opera，但它總是做了它自己的事情。）

如果是這樣，那麼我就會爭吵。正如我提到的，它適用於當前的IE7，FF3，Opera 9和Safari。

還有其他意見嗎？

來源

2009-01-02 12:35:48 user50855

它將「收縮包裝」，這是行爲預期和定義在我發佈的鏈接 – annakata 2009-01-02 12:51:48

我知道唯一的瀏覽器堅持與CSS 2.0的行爲（全寬，非收縮包裝）是IE5/Mac。今天不值得擔心，它的舊佈局引擎（塔斯曼）幾乎肯定會有比浮游物更大的渲染問題。 – bobince 2009-01-02 12:54:55

（假設如果我理解你的問題）

在你不需要設置寬度的列表項大多數情況下。但是（是的，有，但這裏）如果你有顯示的鏈接：塊（讓說你想用推拉門），你必須做一個小竅門：

的HTML：

<ul class="menu"> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul>

和CSS：

.menu li { 
    float:left 
} 
    .menu li a { 
     display:block; 
    } 
    /* ===================== */ 
    /* = and the IE6 trick = */ 
    /* ===================== */ 
    * html .menu li a { 
     width:1%; 
     white-space:nowrap; 
    }

如果不做這樣的，那麼鏈接將被拉長到所有的家長。 LINK不是LIST元素;）通過這種方式，您可以爲IE6設置「最小寬度」，並且不會出現任何其他問題。

來源

2009-01-02 13:26:54

浮動塊級元素：是否需要設置寬度，如果是，如何？

回答

相關問題