如何在動態元素周圍設置父寬度

我試圖設置父div的寬度，以便其所有子div都在一行（水平）上顯示。我正在循環瀏覽子項並使用jQuery的outerWidth(true)函數來查找總的必要寬度。但儘管這個計算似乎對我來說是正確的，但內在因素卻分裂成兩條線。我正在使用Chrome，FF和Safari以及IE9進行測試。我錯過了什麼？如何在動態元素周圍設置父寬度

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>test</title> 
    <style> 
     #outer{ 
      width: 100px; 
      height: 200px; 
      padding: 0px; 
     } 
     .inner{ 
      display: inline-block; 
      width: 20px; 
      height: 20px; 
      margin-right: 5px; 
      margin-bottom: 5px; 
      background-color: yellow; 
     } 
    </style> 
</head> 
<body> 
    <div id="outer"> 
     <div class="inner">0</div> 
     <div class="inner">1</div> 
     <div class="inner">2</div> 
     <div class="inner">3</div> 
     <div class="inner">4</div> 
     <div class="inner">5</div> 
     <div class="inner">6</div> 
     <div class="inner">7</div> 
     <div class="inner">8</div> 
     <div class="inner">9</div> 
    </div> 

    <script src="../js/jquery.1.11.0.js"></script> 
    <script> 
    $(document).ready(function() { 
     var itemsWidthWithMargin = 0; 
     $(".inner").each(function() { 
      itemsWidthWithMargin += $(this).outerWidth(true); 
     }); 
     $("#outer").width(itemsWidthWithMargin); 
     alert(itemsWidthWithMargin); 
    }); 
    </script> 
</body> 
</html>

來源

2014-05-16 Scott Saunders

而不是內聯塊，使用float：left;

.inner{ 
      float:left; 
      width: 20px; 
      height: 20px; 
      margin-right: 5px; 
      margin-bottom: 5px; 
      box-sizing:border-box; 
      background-color: yellow; 
     }

jsfiddle

隨着inline-block的你有這種多餘的空白：Screenshot。

但漂亮和緊身漂浮：左Screenshot。

你可以閱讀更多關於額外的空間here。

來源

2014-05-16 18:34:19 Sammy

這工程！爲什麼這個工作呢？！ –

我編輯了我的答案，查看上面的鏈接。 – Sammy

非常感謝 –

如何在動態元素周圍設置父寬度

回答

相關問題