Я пытаюсь использовать проценты на своей странице, но затем элементы "a" перекрываются. Я не хотел бы менять «размер коробки: border-box;». Я попытался найти решение на inte rnet, но безуспешно. Извините за мой английский sh. У меня есть следующий код:
<!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>
Есть предложения?