格列不齐和文本转换不会为导航条中的链接工作

问题描述 投票:0回答:3

标志和导航链接:我对由两列的导航栏创建了一个内嵌网格布局。这些链接还没有与标识内联。另外,我想文本转换链接文本予以资本化,但没有得到期望的结果。

试图修改网格和使用不同的填充,但似乎不正确的做法。

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>
html css
3个回答
0
投票

另外,我想文本转换链接文本予以资本化,但没有得到期望的结果。

什么是理想的结果呢?你也许想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>

0
投票

我加入display: flexalign-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>

0
投票

display:flex align-items: center justify-content: space-between

.navbar使两者的弹性孩子.links.logo将水平居中。然后justify-content: space-between应该在它们之间推动每个项目出来向左侧和右侧的空间。

© www.soinside.com 2019 - 2024. All rights reserved.