Question

试图找出图像和菜单之间出现空白的原因。

关联的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的事实有关，但如果它是＆＃34;无法修复＆＃34;在使用这个技巧时，我的问题是我需要一些其他方法让vertical-align:middle应用于菜单栏。

由于

Answer 1

而不是在display:table-cell和.logo上.nav-bar使用display:inline-block同时添加vertical-align:middle到.logo。

<强> jsFiddle example

Answer 2

我的建议是，使用包装器找到你的元素并给它们你需要的比例，这样你就可以随意移动它们。并且不要使用表格单元格显示，不管怎么说都不是这种情况。

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

以下是修补DEMO

的小提琴

Answer 3

问题在于此属性.header_nav{width:80%} 要使标题居中，您可以使用此属性：

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

并修复导航栏边距使用

.nav_bar{
    margin-top:2%;
    }

Answer 4

这是你的新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;
}

使用“display：table / table-cell”时的神秘空白

4 个答案: