Question

我开始做一个网站，但遇到了问题。我开始制作导航栏，这是代码：

<div class="navGrid">
            <div class="first">ZENZZEX </div>
            <div class="span-col-4 second">
              <a href=""> <button>Services</button></a>     
              <a href="#"><button>About us</button></a>
              <a href="#"><button>Contact us</button></a>
            </div>
            <div class="third"><a href="#"><button>Get Started</button></a></div>
          </div>

问题是这个<a>标签在我的按钮区域之外占用了空间。这是Codepen上的完整代码： https://codepen.io/MareGraphics/pen/GwqpOy

我想要的是包含一个100％适合于按钮内部而不是按钮外部的标签。谢谢

Answer 1

无法调整height的{{1}}和width的原因是锚元素是<a>。

内联元素不会从新行开始，仅占用必要的宽度。

如果要调整高度和宽度，则需要指定另一个inline-elements属性，例如

display

就其价值而言，最好省略锚标记内的按钮，只需将锚标记样式化为按钮即可使其像按钮一样起作用。

例如如果您使用的是引导程序，则可以

a { display: inline-block; }

Answer 2

从navgrid div中删除按钮，并像这样更改CSS

body {
  margin: 0;
}

.navGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: fixed;
  width: 100%;
  top: 0;
  background-color: white;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.span-col-4 {
  grid-column: span 4 / auto;
}

.navGrid .first {
  color: black;
  text-align: center;
  font-family: 'Dosis', sans-serif;
  font-size: 1.2em;
  font-weight: 800;
  background-color: white;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .5s;
}

.navGrid .first:hover {
  cursor: pointer;
  font-size: 1.31em;
}

.navGrid {
  height: 40px
}

.navGrid .second {
  display: flex;
  padding-left: 50px;
  border-style: none;
  background-color: white;
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
  transition: .5s;
}

.navGrid .second a {
  padding: 10px;
}

.navGrid .second a:hover {
  background-color: rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.navGrid .second:hover {
  cursor: pointer;
}

.navGrid .third {
  display: flex;
  padding-left: 50px;
  border-style: none;
  background-color: rgb(0, 26, 255);
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
  transition: .5s;
  color: white;
}

.navGrid .third a {
  padding: 10px;
}

.navGrid .third:hover {
  background-color: rgb(3, 25, 219);
  cursor: pointer;
}

.navGrid .third {
  border-left: 1px solid black;
}

.content {
  background-color: green;
  height: 2000px;
}

<div class="navGrid">
  <div class="first">ZENZZEX </div>
  <div class="span-col-4 second">
    <a href=""> Services</a>
    <a href="#">About us</a>
    <a href="#">Contact us</a>
  </div>
  <div class="third"><a href="#">Get Started</a></div>
</div>

我认为这可能对您有帮助。

Answer 3

使用此代码：

<a style="padding:50px;background-color:gray;width100%;line-height:70px;" class="btn btn-info">Buttons</a>

如何在按钮标签内以100％的宽度和高度包含锚标签

3 个答案: