有一个孩子高于孩子身高的父母（白色空间）

时间：2017-03-23 19:59:30

标签： html css css3 layout menu

我有一个带有垂直方向的无序列表的菜单。 孩子的宽度设置为100％，并且它是父母的唯一孩子。父级没有设置高度。

父母的身高一直延伸到孩子的身高，但是伸展得太远（约2-3px）。 浅蓝色区域是父母的身体。您可以清楚地看到高度高于带有锚点的列表。如果您使用锚点检查列表，您将看到高度较小。

enter image description here

以下是代码段：

#navigation {
    margin-bottom:10px;
    padding: 15px;
    background: #213059
}
#navigation > nav {
    display: inline-block;
    width: 100%;
}
#navigation > nav > ul {
    list-style-type: none;
    margin: 0;
}
#navigation > nav > ul > li {
    position: relative;
}

#navigation a.nav_button {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#304480',GradientType=0 ); /* IE6-9 */

    color: white;
    float: left;
    padding: 10px 25px 10px 15px;
    border: 1px solid black;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
}
#navigation a.nav_button:hover {
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0 ); /* IE6-9 */
}
<section id="navigation">
	<nav>
		<ul>
			<li>
				<a href="javascript:void(0)" class="nav_button">Home</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">Portfolio</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">About</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">Contact</a>
			</li>
		</ul>
	</nav>
</section>

我认为这与孩子宽度为100％有关。一些看不见的力量会导致浏览器在子元素后面绘制“某物”，从而产生额外的空白区域。

我是否在正确的轨道上？你能帮我解决一下吗？

2 个答案:

答案 0 :(得分：1)

评论后的编辑回答：

将vertical-align: bottom;添加到#navigation > nav规则。由于这是inline-block，否则它将在基线处对齐，这会导致一些剩余的下行空间（在您的问题中可见）。

我还建议将overflow: auto;添加到ul（以包含其中的浮动li）：

＆＃13;
＆＃13; 
#navigation {
    margin-bottom:10px;
    padding: 15px;
    background: #213059
}
#navigation > nav {
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
}
#navigation > nav > ul {
    list-style-type: none;
    margin: 0;
    overflow: auto;
}
#navigation > nav > ul > li {
    position: relative;
}

#navigation a.nav_button {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#304480',GradientType=0 ); /* IE6-9 */

    color: white;
    float: left;
    padding: 10px 25px 10px 15px;
    border: 1px solid black;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
}
#navigation a.nav_button:hover {
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0 ); /* IE6-9 */
}
＆＃13; 
<section id="navigation">
	<nav>
		<ul>
			<li>
				<a href="javascript:void(0)" class="nav_button">Home</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">Portfolio</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">About</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">Contact</a>
			</li>
		</ul>
	</nav>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

浮动li代码，而不是a代码。但是，您必须将其更改为display: block代码

上的a 
#navigation > nav > ul > li {
    position: relative;
    float: left;
}


#navigation {
    margin-bottom:10px;
    padding: 15px;
    background: #213059
}
#navigation > nav {
    display: block;
    overflow: hidden;
    width: 100%;
}
#navigation > nav > ul {
    list-style-type: none;
    margin: 0;
}
#navigation > nav > ul > li {
    position: relative;
    float: left; /* Added this*/
}

#navigation a.nav_button {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #253767 67%, #2d2f62 83%, #213059 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#304480',GradientType=0 ); /* IE6-9 */

    color: white;
    display: block; /* change from float:left to this */
    padding: 10px 25px 10px 15px;
    border: 1px solid black;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
}
#navigation a.nav_button:hover {
    background: #4E7C87; /* Old browsers */
    background: -moz-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4e7c87 0%, #4d5d87 17%, #2e4369 33%,
    #3c3c8b 67%, #4d63aa 83%,#4d84e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e7c87', endColorstr='#4473c8',GradientType=0 ); /* IE6-9 */
}
<section id="navigation">
	<nav>
		<ul>
			<li>
				<a href="javascript:void(0)" class="nav_button">Home</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">Portfolio</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">About</a>
			</li>
			<li>
				<a href="javascript:void(0)" class="nav_button">Contact</a>
			</li>
		</ul>
	</nav>
</section>

好的，那是display: inline-block #navigation > nav。如果您不想overflow: hidden，请将float:left代码上的li更改为display: inline-block。

enter image description here

相关问题
最新问题