的UL的子元素的組合寬度等於比他們的總和

回答更的UL的子元素的組合寬度等於比他們的總和

我開始覺得我失去了我的腦海裏...... 目前我正在試圖建立一個簡單的頂部導航是頁眉中的margin-0-auto-ed。它包含五個子女<li> - 元素寬度爲200px。如果我仍然可以正確計算，那等於1000px的寬度。但要把所有的孩子都放在頂部<ul> -element需要1016px的寬度。我只是不明白這是從哪裏來的。所有邊距，填充等都通過CSS重置消除。代碼如下：

HTML

<div id="header-wrapper"> 
     <div id="header"> 
       <ul id="head-menu"> 
        <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li> 
        <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li> 
        <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li> 
        <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li> 
        <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li> 
       </ul> 
     </div> 
    </div>

CSS

#header-wrapper   { width: 100%; height: 56px; position: relative } 
#header     { width: 100%; height: 56px; background: #111; position: absolute; } 
#head-menu    { width: calc(5*200px); margin: 0 auto;} 
.head-menu-item   { display: inline-block } 
.head-menu-item-link { display: inline-block; padding: 20px; width: calc(200px - 40px); text-align: center }

更新13年9月29日

如果有人懷疑，而不是註釋掉白空間或去對於一些負面左利潤率，我只是用這個語法：

</li><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a> 
</li><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>

這已經很容易做到了，在不改變代碼太多，並保持它的清潔。

來源

2013-09-25 Mo Friedrich

的問題是inline elements相互之間的補充，因爲對你的HTML的空白（即使是一個簡單的斷行），這裏是你修復一個額外的空間jsfiddle

HTML

<div id="header-wrapper"> 
    <div id="header"> 
     <ul id="head-menu"> 
      <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a> 
      </li><!-- 
      --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a> 
      </li><!-- 
      --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a> 
      </li><!-- 
      --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a> 
      </li><!-- 
      --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a> 
      </li> 
     </ul> 
    </div> </div>

來源

2013-09-25 18:55:32

你認爲使用'display：table-cell' vs'display：inline-block'會有什麼問題嗎？我知道'display：table-cell'有一些瀏覽器兼容性問題。 – jbaum012

在我的opnion中，使用表格而不是內嵌塊的唯一問題是瀏覽器的兼容性 –

display:inline-block在li之間插入空格（即顯示HTML中顯示的空白）。如果您在背景上放置背景色，您可以更清楚地看到這一點。

來源

2013-09-25 18:53:40 andi

但是，如何在不使用'display：inline-block'的情況下將元素顯示爲水平列表？或者有沒有辦法去除這個間距？我以前從未遇到過這個問題...... –

看我的答案@MoritzFriedrich –

您可以編輯您的HTML以刪除li之間的空格，以獲得一種可能性。如果這不適合你，也有CSS選項。 – andi

或者如果你只是希望你的html看起來整潔，你可以給顯示添加一個負邊距：inline-block元素（爲了解釋它們在html代碼中的差距），但它只有在你有一個固定的佈局，這很少發生變化，而且你太過堅決要搞亂你的代碼了去掉空格或添加評論

來源

2013-09-25 19:58:14 gaurav5430

我沒有足夠的「名譽」發表評論，但我想重申的東西維尼修斯賴斯說，你白空間代碼，即...

<div id="foo"></div> 
<div id="bar"></div> 
<div id="thing"></div>

所見這裏通過將不同線路（創建編碼空格）可使AA戲劇性的效果，在那裏把...

<div id="foo"></div><div id="bar"></div><div id="thing"></div>

可以創造預期的效果，因爲我花好幾個小時不知道爲什麼我的三個年代後發現當與jquery re完美定位時，下一個襯裏尺寸。再次感謝ViníciusMoraes指出這個新秀的錯誤。

來源

2015-08-12 18:35:59 nathan

的UL的子元素的組合寬度等於比他們的總和

回答

相關問題