时间戳

首页 > 解决方案 > 网格列未对齐且文本转换不适用于导航栏中的链接

html - 网格列未对齐且文本转换不适用于导航栏中的链接

问题描述

我为包含两列的导航栏创建了内联网格布局：徽标和导航链接。链接仍未与徽标内联。另外，我正在尝试对要大写的链接文本进行文本转换，但没有得到想要的结果。

尝试修改网格并使用不同的填充，但似乎不是正确的方法。

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>

标签： htmlcss

解决方案

另外，我正在尝试对要大写的链接文本进行文本转换，但没有得到想要的结果。

期望的结果是什么？你可能想要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>

推荐阅读