嗨,我正在尝试制作一个包含列表项的导航栏。问题是,一旦我尝试使用align-items:center; 导航按钮不会占用容器的全部宽度,而只占用列表内容空间。 有没有一种方法可以使项目对齐以使列表元素居中,而列表元素不会占用内容大小,而是具有某种响应性的灵活宽度。 也许没有人这样做,您可能会暗示什么是最佳做法。
我想要得到的结果是类似屏幕截图,其中的项居中。 enter image description here
body{
font-size: 16px;
}
/*----------------------------background-colors----------------------------------------------*/
header{
background-color:#87509C;
}
/*--------------------------------------------------------------------------*/
header{
display:flex;
flex-direction: column;
align-items: center;
padding:20px 2%;
}
header ul{
display:flex;
flex-direction:column;
flex:100%;
padding-left:0;
}
header ul li{
list-style: none;
margin:9px 0px;
text-transform: uppercase;
font-size:1rem; /*18px/16px*/
line-height:1.125rem;
padding-top:10px;
}
header ul li a{
border: 1px solid black;
text-align: center;
text-transform:uppercase;
text-decoration: none;
padding-top:10px;
padding-bottom:8px;
}
li {
display:flex;
flex-direction:column;
flex-grow:100%;
}
.logo-image{
max-width:118px;
}
<header>
<img src="images/logo.png" alt="website logo" class="logo-image">
<ul>
<li><a href="#">Homes</a></li>
<li><a href="#">about</a></li>
<li><a href="#">work</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<p>
Hi there! We are the new kids on the block
and we build awesome websites and mobile apps.
</p>
<a href="#">Work with us!</a>
</header>