gpt4 book ai didi

html - 除了第一个 child 之外,所有文本都向右对齐

转载 作者:太空宇宙 更新时间:2023-11-04 00:47:38 24 4
gpt4 key购买 nike

我正在尝试将所有导航链接( Logo 除外)对齐到容器/导航的右侧。我想在两侧保留 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) 选择器时所有导航链接都向右对齐。

最佳答案

这个:

.menu:not(:first-child)

选择不是第一个 child 的类菜单项。

你想要的是:

.menu :not(:first-child)

选择 .menu 类中的非第一个子元素。

注意空格。

或者更好的是,让你的真正意思更明显:

.menu li:not(:first-child)

关于html - 除了第一个 child 之外,所有文本都向右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56720051/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com