标志和导航链接:我对由两列的导航栏创建了一个内嵌网格布局。这些链接还没有与标识内联。另外,我想文本转换链接文本予以资本化,但没有得到期望的结果。
试图修改网格和使用不同的填充,但似乎不正确的做法。
body {
font-family: 'Robo', sans-serif;
}
.navbar {
display: inline-grid;
grid-template: auto auto;
grid-column-gap: 680px;
text-decoration: none;
border-bottom: 1px solid rgb(196, 196, 196);
background-color: #F7F9F9;
padding: 10px;
width: 100%;
}
.logo {
grid-column: 1/2;
}
.links {
grid-column: 2/2;
}
.logo h1 {
font-size: 32px;
font-weight: 340;
}
.links a {
text-transform: capitalize;
text-decoration: none;
font-size: 20px;
padding-left: 40px;
}
<nav>
<div class="navbar">
<div class="logo">
<h1>Rick Wilson</h1>
</div>
<div class="links">
<a href="#">Experience</a>
<a href="#">Projects</a>
<a href="#">Technology Stack</a>
<a href="#">Contact</a>
</div>
</div>
</nav>
另外,我想文本转换链接文本予以资本化,但没有得到期望的结果。
什么是理想的结果呢?你也许想uppercase
?
做了一些调整你的网格布局,这是你需要什么?
body {
font-family: "Robo", sans-serif;
margin: 0;
}
.navbar {
display: grid;
grid-template-columns: auto 1fr;
border-bottom: 1px solid rgb(196, 196, 196);
background-color: #f7f9f9;
padding: 20px;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: 300;
}
.links {
text-align: right;
}
.links a {
text-transform: capitalize;
text-decoration: none;
font-size: 16px;
margin-left: 20px;
}
<div class="navbar">
<h1 class="logo">Rick Wilson</h1>
<div class="links">
<a href="#">Experience</a>
<a href="#">Projects</a>
<a href="#">Technology Stack</a>
<a href="#">Contact</a>
</div>
</div>
我加入display: flex
和align-items: center
到.links
body {
font-family: 'Robo', sans-serif;
}
.navbar{
display:inline-grid;
grid-template: auto auto;
grid-column-gap: 680px;
text-decoration: none;
border-bottom: 1px solid rgb(196, 196, 196);
background-color:#F7F9F9;
padding:10px;
width: 100%;
}
.logo {
grid-column: 1/2;
}
.links {
grid-column: 2/2;
display: flex;
align-items: center;
}
.logo h1 {
font-size:32px;
font-weight: 340;
}
.links a {
text-transform: capitalize;
text-decoration: none;
font-size:20px;
padding-left: 40px;
}
<header>
<nav>
<div class = "navbar">
<div class = "logo"><h1>Rick Wilson</h1></div>
<div class = "links">
<a href="#">Experience</a>
<a href="#">Projects</a>
<a href="#">Technology Stack</a>
<a href="#">Contact</a>
</div>
</div>
</nav>
</header>
加
display:flex
align-items: center
justify-content: space-between
到.navbar
使两者的弹性孩子.links
和.logo
将水平居中。然后justify-content: space-between
应该在它们之间推动每个项目出来向左侧和右侧的空间。