爲什麼應用CSS寬度會導致此框下拉一條線？

我意識到這個問題是比較具體的......我試圖讓我的頭清楚地圍繞「寬度」對CSS框模型的影響。爲什麼應用CSS寬度會導致此框下拉一條線？

我在兩個單選按鈕的左邊有一個標籤。標籤向左浮動，單選按鈕顯示在標籤的右側。單選按鈕本身右側有標籤，這些標籤可以很長。

收音機在UL模塊中。

當我有寬度：自動;在UL塊上，然後將瀏覽器縮小到很窄，單選按鈕和它們各自的標籤下降到下一行。

如果我刪除寬度：auto，單選按鈕保持浮動狀態，收音機旁邊的標籤字符串不斷縮小，這正是我想要的。

我的問題是：爲什麼寬度：自動導致無線電及其標籤下降一行？是因爲寬度：自動嘗試創建一個可容納標籤字符串全長而不流動文本的框？或者還有其他工作？

這裏的示例代碼這表明行爲：

<style> 
    .inlineLabels ul{ 
     float:left; 
     width: 66%; 
     padding: 0; 
    } 

    p.label{ 
     float:left; 
     text-align:right; 
     position:relative; 
     width:32%; 
     margin: .3em 2% 0 0; 
     display:block; 
    } 

    ul.blockLabels{ 
     /*width:auto; why does uncommenting this cause the radios to drop down to a new line when shrinking browser size? */ 
     list-style:none; 
    } 
</style> 
<fieldset class="inlineLabels"> 
    <div> 
     <p class="label">Choose:</p> 
     <ul class="blockLabels"> 
      <li> 
       <label for="a-1"> 
        <input name="a" id="a-1" value="0" type="radio">&nbsp;<span class="">A short string</span> 
       </label> 
      </li> 
      <li> 
       <label for="a-2"> 
        <input name="a" id="a-2" value="1" type="radio">&nbsp;<span class="">A very very very very very very very very very very very very string</span> 
       </label> 
      </li> 
     </ul> 
    </div> 
</fieldset>

來源

2011-10-21 marc esher

TLDR：具有寬度auto的浮動元素的「首選寬度」是沒有換行符的內容寬度。這就是爲什麼引擎將首先包裝浮動，並且只是作爲最後一個措施，它將開始在浮動內包裝文本。

您可以閱讀該規範的答案：http://www.w3.org/TR/CSS2/visudet.html#float-width

如果「寬」被計算爲「自動」，使用的值是「收縮到合適」的寬度。

收縮擬合寬度的計算與使用自動錶格佈局算法計算表格單元的寬度相似。粗略地說：通過格式化內容來設置首選寬度，而不是除了顯式換行符之外的地方斷開行，並且還可以通過嘗試所有可能的換行符來計算首選最小寬度。 CSS 2.1沒有定義確切的算法。第三，找到可用的寬度：在這種情況下，這是包含塊的寬度減去'margin-left'，'border-left-width'，'padding-left'，'padding-right'和'border-right-width'，'margin-right'以及任何相關滾動條的寬度。

然後縮小到適合的寬度是：min（最大（首選最小寬度，可用寬度），首選寬度）。

來源

2011-10-22 00:18:47 deviousdodo

@FuzzicalLogic有問題的UL是左浮動的，浮動元素的上述情況正確 - 請按照我提供的鏈接。 – deviousdodo

你絕對正確。對不起，我很抱歉。獎勵！附：我始終關注鏈接。：P（現在把我的頭埋在恥辱裏，哈哈。） –

我想獨立設置的寬度或不是的，你可能需要的樣式李。

ul.blockLabels li{float:left;}

來源

2011-10-21 17:58:18 takebo

爲什麼應用CSS寬度會導致此框下拉一條線？

回答

相關問題