CSS填充父项
问题描述:
我试图做一个水平的导航栏,我已经坐在页面的顶部,三个列表项中的每一个填满了三分之一的空间,所有这一切都很好部分。CSS填充父项
问题是,当我尝试使锚标记(它在列表项中)填满所有列表项的空间。我将它设置为display: block;
,所以它占据了全部宽度,但是我无法让它填充垂直空间,我希望如何。我可以使用height: 100%
,它会填满空间,但是如果我这样做,锚标记的文本将停留在列表项的空间顶部,但是我希望它是垂直居中的。为此,我想到了顶部和底部填充,所以我尝试设置padding: 100%;
。发生这种情况时,我再也看不到锚标签的文字了。通过用鼠标拖动空间,看起来标签占用的空间比列表项中的空间要多。
这是导航栏的与height: 100%;
图像: 注:围绕每个部分中的红色线是我设置可见,以查看边界
相关HTML代码如下:
<ul class="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Test page</a></li>
<li><a href="#">Test page 2</a></li>
</ul>
相关的CSS代码如下:
body * {
font-family: Roboto sans-serif;
box-sizing: border-box;
border: solid 2px red;
}
header ul.main_nav {
background-color: gray;
color: #EBEBEB;
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
list-style-type: none;
list-style-position: inside;
overflow: hidden;
}
header ul.main_nav li {
text-align: center;
float: left;
width: calc(100%/3);
height: 100%;
}
header ul.main_nav li a {
display: block;
height: 100%;
text-decoration: none;
}
编辑:我宁愿不使用固定的尺寸来解决这个问题,因为我主要是喜欢能够编辑一个值(50像素为UL)来调整整个导航栏
答
,你可以做到这一点使用Flexbox的 ,
*,
*:before,
*::after {
box-sizing: border-box;
}
body * {
font-family: Roboto sans-serif;
border: solid 2px red;
}
ul.main_nav {
background-color: gray;
color: #EBEBEB;
margin: 0;
padding: 0;
width: 100%;
height: 50px;
list-style-type: none;
list-style-position: inside;
display: flex
}
ul.main_nav li {
flex: 1;
display: flex;
height:100%;
}
ul.main_nav li a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: yellow
}
<ul class="main_nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">Test page</a>
</li>
<li><a href="#">Test page 2</a>
</li>
</ul>
如果你将拥有一个在线只在你的菜单,哟可以使用line-height
,见下文
*,
*:before,
*::after {
box-sizing: border-box;
}
body * {
font-family: Roboto sans-serif;
border: solid 2px red;
}
ul.main_nav {
background-color: gray;
color: #EBEBEB;
margin: 0;
padding: 0;
width: 100%;
height: 50px;
list-style-type: none;
list-style-position: inside;
overflow: hidden;
font-size: 0;
}
ul.main_nav li {
text-align: center;
width: calc(100%/3);
height: 100%;
display: inline-block;
font-size: 16px
}
ul.main_nav li a {
display: block;
height: inherit;
background: yellow;
text-decoration: none;
line-height: 32px /*this should be the same value has the parent height*/
}
<ul class="main_nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">Test page</a>
</li>
<li><a href="#">Test page 2</a>
</li>
</ul>
改变'盒大小:边界box',使填充和边框成为尺寸计算的一部分。默认情况下他们不是。 –
你已经为ul.main_nav(50px)设置了一个固定的高度......你是否尝试过使用li而不是100%?行高有时也很有效。 – andi
不确定框的大小是否沿着树继承。不能伤害到明确地将其添加到溢出元素中。 –