Question

我希望使屏幕快照中显示的导航链接周围具有相同的填充，而与文本长度无关（我的教授说了一些有关“合理化”的内容，尽管我不完全记得）。另外，我希望菜单仅延伸到一定宽度，然后再保持相同大小。

导航链接在第一个链接上显示填充问题：

Navigation links

这是导航链接的html：

<nav id="navigation">
  <ul>
    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
    <li><a id="nav-cont" href="#content">My Shoes</a></li>
    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
    <li><a id="nav-care" href="care">Proper Care</a></li>
  </ul>
</nav>

这是导航链接的CSS：

nav a {
    background-color: #280e0e;
    border-radius: 15px;
    color: #C70039;
    display: block;
    font-size: 1.25em;
    padding-bottom: 0.444em;
    padding-top: 0.444em;
    align: center;
    text-decoration: none;
    max-width: 18.889em; 
}

nav ul li {
    text-align: center;
    padding-bottom: 11px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-bottom: 0;
}

以下是我的导航链接的媒体查询：

@media screen and (min-width: 484px){
    nav ul {
        display: flex;
        justify-content: center;
        margin: 0 -0.25em;
    }

    nav ul li {
        flex-grow: 1;
        margin: 0 0.25em;
        padding-left: 0.333em;
        padding-right: 0.333em;
    }

这是一个学校项目，我只需要使用CSS来编辑所有内容。我想继续使用flexbox，而不要更改为其他任何内容。

Answer 1

我能够想到这个，但是它稍微扩展了盒子。

nav a {
  background-color: #280e0e;
  border-radius: 15px;
  color: #C70039;
  display: block;
  font-size: 1.25em;
  padding-bottom: 0.444em;
  padding-top: 0.444em;
  align: center;
  text-decoration: none;
  max-width: 18.889em;
  height: 40px;
}

nav ul li {
  text-align: center;
  padding-bottom: 11px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-bottom: 0;
}

@media screen and (min-width: 484px) {
  nav ul {
    display: flex;
    justify-content: center;
    margin: 0 -0.25em;
  }
  nav ul li {
    flex-grow: 1;
    margin: 0 0.25em;
    padding-left: 0.333em;
    padding-right: 0.333em;
  }
}

<nav id="navigation">
  <ul>
    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
    <li><a id="nav-cont" href="#content">My Shoes</a></li>
    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
    <li><a id="nav-care" href="care">Proper Care</a></li>
  </ul>
</nav>

上面我包含了一个代码段，但是您可以看到它在codepen here中有效。您还可以找到一个有效的示例here, on my website。

Answer 2

<!DOCTYPE html>
<html>
<head>
	<title>Nav menu</title>
	<style>

		ul {
			list-style-type: none;
			margin: 0;
			padding-bottom: 0;
			display: flex;	
		}
		nav ul li {
			text-align: center;
			padding-bottom: 11px;
			margin: 10px 10px;
		}
		nav a {
			background-color: #280e0e;
		    border-radius: 15px;
		    color: #C70039;
		    display: block;
		    word-break: normal;
		    white-space: pre;
		    font-size: 1.25em;
		    padding-bottom: 0.444em;
		    padding-top: 0.444em;
		    text-align: center;
		    text-decoration: none;
		    max-width: 18.889em;
		    padding-left: 15px;
		    padding-right: 15px;
		}

	</style>
</head>
<body>
	<nav id="navigation">
	  <ul>
	    <li><a id="nav-intro" href="#introduction">Introduction</a></li>
	    <li><a id="nav-cont" href="#content">My Shoes</a></li>
	    <li><a id="nav-loc" href="locations">Where I buy from</a></li>
	    <li><a id="nav-care" href="care">Proper Care</a></li>
	  </ul>
	</nav>
</body>
</html>

如何使所有导航链接看起来相同？

2 个答案: