Question

我想制作水平放置的块链接。但随着缩放网站看起来很糟糕。我限制了块的高度，但是链接的文本比块的大小更大。文本在块外可见。

header {
  position: absolute;
  background-color: rgba(209, 208, 206, 0.6);
  height: 22vh;
  z-index: 5;
  width: 100%;
}

nav#menu {
  height: 3rem;
  position: relative;
  top: 14vh;
  max-height: 7vh;
}

nav#menu ul.left {
  top: 0;
  left: 0;
  margin-left: 5vh;
  list-style-type: none;
  height: 100%;
  position: relative;
  float: left;
}

nav#menu ul.left li {
  height: 100%;
  float: left;
  position: relative;
}

nav#menu ul li a {
  height: 100%;
  display: block;
  text-decoration: none;
  position: relative;
  top: 0;
  left: 0;
  font-size: 1.3rem;
}

<header>
  <div class="wrapper">
    <nav id="menu">
      <ul class="left">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </div>
</header>

我该如何解决？如何限制链接的字体大小？或者是否可以限制缩放以使网站看起来不错？

The links looks like this

Answer 1

首先，从所有元素中删除height:100%;。

然后在元素nav#menu ul li a上将display:block;设为display:inline-block;

需要对CSS进行一些修正，并且需要删除一些无用的CSS。

nav#menu ul.left {
  margin-left: 5vh;
  list-style-type: none;
  float: left;
}

nav#menu ul.left li {
  float: left;
}

nav#menu ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 1.3rem;
}

由于

文本链接通过缩放超出边框

1 个答案: