在页面的左侧放置一个元素

你好，我是新的HTML/CSS，我需要帮助的东西:我的页面我如何把作品集到我的页面的左边缘。这是我的代码:HTML:

<nav>
<ul id="nav">
<li class="nav-item">PORTFOLIO</li>
<li class="nav-item">Présentaion</li>
<li class="nav-item">Réalisations</li>
<li class="nav-item">Mon CV</li>
<li class="nav-item">Me contacter</li>
</ul>
</nav>

CSS:

#nav{
display : flex;
text-transform: uppercase;
justify-content:center;
align-items: center;  
}
.nav-item{
text-decoration : none;
list-style : none;
text-transform: uppercase;
margin-right: 2em;
font-family: 'Oswald', sans-serif;
}
.nav-item:first-child{
font-size:30px;
}

所以我创建了一个列表来制作导航栏，我使用display fex，所以它会在直线上，我使用justify-content来居中我的导航栏和align-items来水平居中。我可以在。nav-item:first-child中添加什么来使PORTFOLIO文本位于页面的最左侧呢?

这就是我想要实现的页面

谢谢你读我的书并帮助我。

我尝试了justify-self, left property, align self…

解决方案将根据您想要获得的视觉结果而有所不同。根据上下文判断，您需要"投资组合"。AND所有其他元素都在中心，对吧?

当然，你可以在这里做一个简单的绝对定位，但在这种情况下，如果屏幕宽度不够，它会与按钮重叠，所以最好采用另一种方法:

将按钮和徽标分开，使它们成为外部容器的两个子组件
为你的导航容器启用flexxbox并将所有内容对齐到中心
添加一个flex: 1属性到你的导航按钮容器，使其占用所有可用空间
定义你的标志宽度(例如，150px)，如果你需要严格地居中你的导航按钮在下一步
为了补偿徽标的存在并严格地将按钮居中(如果需要)，为导航按钮创建右距

请看下面的例子:

body {
margin: 0;
font-size: 12px;
}
.nav {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
justify-self: start;
width: 150px;
text-align: center;
}
#nav-buttons {
display: flex;
text-transform: uppercase;
justify-content: center;
align-items: center;
margin-right: 150px;
padding: 0;
flex: 1;
}
.nav-item {
list-style: none;
margin-right: 10px;
}

<!DOCTYPE html>
<html lang="en">
<body>
<nav class="nav">
<div class="logo">PORTFOLIO</div>
<ul id="nav-buttons">
<li class="nav-item">Présentaion</li>
<li class="nav-item">Réalisations</li>
<li class="nav-item">Mon CV</li>
<li class="nav-item">Me contacter</li>
</ul>
</nav>
</body>
</html>

但是要小心:这个设计在小屏幕上看起来不太好。祝你学习顺利!

已经有答案了。我只是把我的加了进去，以防万一。

#nav{
display : flex;
text-transform: uppercase;
justify-content:center;
align-items: center;  
}
.nav-item{
text-decoration : none;
list-style : none;
text-transform: uppercase;
margin-right: 2em;
font-family: 'Oswald', sans-serif;
}
.nav-item:first-child{
position:fixed;
left: 0;
margin: 1rem;
font-size:30px;
}

<nav>
<ul id="nav">
<li class="nav-item">PORTFOLIO</li>
<li class="nav-item">Présentaion</li>
<li class="nav-item">Réalisations</li>
<li class="nav-item">Mon CV</li>
<li class="nav-item">Me contacter</li>
</ul>
</nav>

相关内容

最新更新

热门标签：