我正在尝试将徽标之外的所有导航链接与容器/导航的右侧对齐。我想在两侧保持1rem的边距,以便使内容具有一定的呼吸空间。
我尝试使用下面的代码,但页面上没有任何更改:
.menu:not(:first-child){
text-align: right;
}
<body>
<div class="body-wrap">
<header class="header">
<nav role="navigation">
<ul class="menu">
<li class="home-link"><a href="#"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>
</header>
</div>
</body>
* { box-sizing: inherit; margin: 0; padding: 0; }
body {
position: relative;
line-height: 1.5em;
min-width: 320px;
margin: 0 auto;
color: #222222;
border: 30px solid #ffffff;
background-color: #f8f7f3;
}
.body-wrap {
display: flex;
min-height: 100vh;
display: box;
}
.header {
width: 100%;
max-width: 960px;
margin-right: 1rem;
margin-left: 1rem;
}
.menu {
display: flex;
position: absolute;
top: -0.83rem;
width: 100%;
max-width: 960px;
}
.menu:not(:first-child){
text-align: right;
}
li {
flex-grow: 1;
position: relative;
margin-right: 1em;
display: inline-block;
}
使用:not(:first-child) selector.
答案 0 :(得分:2)
此:
.menu:not(:first-child)
选择不是第一个孩子的班级菜单项。
您想要的是:
.menu :not(:first-child)
在.menu类中选择非第一子元素。
注意空格。
或更妙的是,使您的意思更明显:
.menu li:not(:first-child)
答案 1 :(得分:0)
如果您只想将文本向右对齐,则可能只需要更改为此。
.menu li:not(:first-child){
text-align: right;
}