使用「display：table/table-cell」時的神祕空白

試圖弄清爲什麼圖像和菜單之間出現空白。使用「display：table/table-cell」時的神祕空白

相關的HTML和CSS如下：

<header class="header_nav"> 

     <img src="img/logo.png" class="logo"/> 

     <nav class="nav_bar"> 
      <ul> 
       <li>Home</li> 
       <li>The Nest</li> 
       <li>Our Sparrows</li> 
       <li>Volunteer</li> 
       <li>Support</li> 
       <li>Contact</li> 
      </ul> 
     </nav> 

    </header> 



body, html 
{ 
width:100%; 
min-height:100%; 
margin:0; 
border:0; 
padding:0; 
background-color: #F0EEE8; 
} 

.header_line 
{ 
margin:0; 
border:0; 
padding:0; 
position:absolute; 
top:0; 
height:20px; 
width:100%; 
background:#75B0A8; 
border-bottom:5px solid white; 
} 

.header_nav 
{ 
display:table; 
margin:0; 
border:0; 
padding:0; 
margin-right:10%; 
margin-left:10%; 
width:80%; 
margin-top:35px; 
height:83px; 
} 

.logo 
{ 
display:table-cell; 
margin:0; 
border:0; 
padding:0; 
} 

.nav_bar 
{ 
display:table-cell; 
margin:0; 
border:0; 
padding:0; 
vertical-align:middle; 
} 

.nav_bar ul 
{ 
margin:0; 
border:0; 
padding:0; 
list-style:none; 
} 

.nav_bar ul li 
{ 
margin:0; 
border:0; 
padding:0; 
display:inline; 
font-family:Georgia,serif; 
font-size:20px; 
}

無論我怎麼努力，我不能把它解決。此外，我的想法是，這與我使用display:table和display:table-cell這一事實有關，但如果它在使用該技巧時是「不可修復的」，那麼我的問題是我需要其他方式將vertical-align:middle應用到菜單欄。

感謝

來源

2014-03-19 pooley1994

是徽標和菜單之間的空白。不是白色邊框？對？ – michel

我希望你能更清楚 – HackerKarma

@ user3317140問題清晰地顯示_「圖像和菜單**之間出現空白**」。 – Nit

這是你的新的CSS。

問題出在.logo，.header-nav和nav-bar。

如果您告訴元素顯示爲表格單元格，那麼該元素的行爲就像是表格單元格一樣。不幸的是，表格的獨特定位能力意味着很容易犯錯，這會導致佈局破裂。

相反，請熟悉在坐在同一行上的塊元素上使用內嵌塊。

body, html { 
    width:100%; 
    min-height:100%; 
    margin:0; 
    border:0; 
    padding:0; 
    background-color: #F0EEE8; 
} 

.header_line { 
    margin:0; 
    border:0; 
    padding:0; 
    position:absolute; 
    top:0; 
    height:20px; 
    width:100%; 
    background:#75B0A8; 
    border-bottom:5px solid white; 
} 

.header_nav { 
    display:block; 
    margin:0; 
    border:0; 
    padding:0; 
    margin-right:10%; 
    margin-left:10%; 
    width:80%; 
    margin-top:35px; 
    height:83px; 
} 

.logo { 
    display:inline-block; 
    vertical-align: middle; 
    margin:0; 
    border:0; 
    padding:0; 
} 

.nav_bar { 
    display:inline-block; 
    margin:0; 
    border:0; 
    padding:0; 
    vertical-align:middle; 
} 

.nav_bar ul { 
    margin:0; 
    border:0; 
    padding:0; 
    list-style:none; 
} 

.nav_bar ul li { 
    margin:0; 
    border:0; 
    padding:0; 
    display:inline; 
    font-family:Georgia,serif; 
    font-size:20px; 
}

來源

2014-03-19 03:36:53 jmgem

非常感謝！我將不得不閱讀CSS並澄清爲什麼您的編輯工作正常，但爲了及時響應，我只是將其插入以查看，這既實現了我的目標，又擺脫了元素假裝的需要成爲桌子。 – pooley1994

我的建議，使用包裝來找到您的元素，並給他們你需要讓你可以隨意移動它們的比例。不要使用表格單元顯示，而不是在這種情況下。

.left-col{width:25%; float:left} 
.right-col{width:75%; float:right;}

這裏是你的修復小提琴DEMO

來源

2014-03-19 01:48:51 LOTUSMS

問題是在這個屬性.header_nav{width:80%} 到頭球攻門，你可以使用這個屬性，而不是：

.header_nav{ 
width:100%; 
display:block; 
margin:auto; 
}

並修復導航bar margin use

.nav_bar{ 
    margin-top:2%; 
    }

來源

2014-03-19 02:46:34 Ahmedskaya

這並不解決與問題相關的任何事情。 – pooley1994

它的測試和工作正常！ – Ahmedskaya

而不是在.logo和.nav-bar上使用display:table-cell，在到.logo上都使用display:inline-block。

jsFiddle example

來源

2014-03-19 02:58:48 j08691

這幾乎結束了工作，是的。隨着'display：block'添加到'.header_nav'。 – pooley1994

使用「display：table/table-cell」時的神祕空白

回答

相關問題