时间戳

首页 > 解决方案 > 百分比的工作方式与像素不同（使用百分比后，元素重叠）

html - 百分比的工作方式与像素不同（使用百分比后，元素重叠）

问题描述

我尝试在我的页面上使用百分比，但随后“a”元素重叠。我不想改变“box-sizing:border-box;”。我试图在互联网上找到解决方案，但没有成功。对不起我的英语不好。我有以下代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
      box-sizing: border-box; /* I would not like to change / delete it */
      margin: 0;
      padding: 0;
      }

      body {
      text-align: center;
      }

      nav {
      background-color: black;
      position: fixed;
      width: 100%;
      }

      ul {
      list-style: none;
      }

      ul li {
      display: inline-block;
      }

      ul li a {
      display: block;
      width: 200px; /* I would like to use % here! */
      border-style: solid;
      border-color: red;
      border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
      </ul>
    </nav>
  </body>
</html>

有什么建议么？

标签： htmlcss

解决方案

ul li {
  display: inline-block;
width:20%;
  }

推荐阅读