2

我正在将应该是一个简单的导航栏和带有弹性框的样式放在一起。由于某种原因，它不是显示为一行（水平），而是显示为一列（垂直）。

我可以使用float:left 使链接变为水平，但是它们不会均匀地拉伸以填充导航栏。

我的理解是flex-grow:1 应该让每个项目占据相等的空间。但这并没有发生。

有四个声明没有按预期工作：

flex-direction 导航栏中的链接位于一列而不是一行

padding 尽管导航栏的内边距设置为零，但它似乎仍然有内边距

text-align 每个中的文本<li>没有水平居中

flex-grow 链接间距不均匀

我不确定它们是否都源于一个问题，或者每个单独的问题。

这是一个简化的片段：

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
	display: flex;
	flex-direction: row; /* not working */
	background-color: #d2d6d6;
	padding: 0; /* not working */
}
nav a {
	display: flex;
	text-decoration: none;
	list-style: none;
	border: 2px solid #727171;
	color: #727171;
	background-color: #c4c4c4;
	padding: 4px;
	margin: 2px;
	text-align: center; /* not working */
	flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
	background-color: #aaa;
}
</style>
</head>

<body>
<nav>
	<ul>
		<a href="#"><li>Once</li></a>
		<a href="#"><li>Upon</li></a>
		<a href="#"><li>A Time</li></a>
		<a href="#"><li>There</li></a>
		<a href="#"><li>Was</li></a>
		<a href="#"><li>A Problematic</li></a>
		<a href="#"><li>Nav Bar</li></a>
	</ul>
</nav>
</body>
</html>

我以前用过很多次弹性盒子，但从未见过它表现得像这样。

4

5 回答 5

2
  1. 使用flexto ulnot nav（您必须设置flex为您想要的元素的 wrap DOM flex）
  2. 我认为最好ul立即使用而li不是a（ul li a）

ul {
  display: flex;
  flex-direction: row;
  background-color: #d2d6d6;
  padding: 0;
}

nav li {
  display: flex;
  text-decoration: none;
  list-style: none;
  border: 2px solid #727171;
  color: #727171;
  background-color: #c4c4c4;
  padding: 4px;
  margin: 2px;
  text-align: center;
  flex-grow: 1;
}

nav a:hover,
nav a:active {
  background-color: #aaa;
}
<nav>
  <ul>
    <li>
      <a href="#">Once</a>
    </li>
           <li>
      <a href="#">Once</a>
    </li>
    <li>
      <a href="#">Once</a>
    </li>
    <li>
      <a href="#">Once</a>
    </li>
    <li>
      <a href="#">Once</a>
    </li>
  </ul>
</nav>

于 2019-05-29T05:11:38.647 回答
2

您的代码中有一个小错误，这是更正的错误，您已将所有属性赋予 Nav，而您需要将这些属性分配给 UL，

  1. 不需要给出 flex-direction: row 因为这是默认属性。
  2. 填充现在也可以工作，请检查。

nav ul {
	display: flex;
        text-decoration: none;
	flex-direction: row; /* not working */
	background-color: #d2d6d6;
	padding: 0; /* not working */
}
nav li {
	display: flex;
	text-decoration: none;
	list-style: none;
	border: 2px solid #727171;
	color: #727171;
	background-color: #c4c4c4;
	padding: 4px;
	margin: 2px;
	justify-content: center;
	flex-grow: 1;
}
nav a:hover,
nav a:active {
	background-color: #aaa;
}
<nav>
	<ul>
		<li><a href="#">Once</a></li>
		<li><a href="#">Upon</a></li>
		<li><a href="#">A Time</a></li>
		<li><a href="#">There</a></li>
		<li><a href="#">Was</a></li>
		<li><a href="#">A Problematic</a></li>
		<li><a href="#">Nav Bar</a></li>
	</ul>
</nav>

于 2019-05-29T05:16:18.100 回答
0

您也可以尝试将 display: flex 赋予 nav ul 。

nav ul {
    display: flex;
}

现在项目出现在一行而不是一列中。默认情况下，ul是块元素，因此显示将被阻止ul。

于 2019-05-29T05:11:14.767 回答
0

在nav a {...}替换display: flex;掉display: inline-flex;

效果如下：

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
	display: flex;
	flex-direction: row; /* not working */
	background-color: #d2d6d6;
	padding: 0; /* not working */
}
nav a {
	display: inline-flex;
	text-decoration: none;
	list-style: none;
	border: 2px solid #727171;
	color: #727171;
	background-color: #c4c4c4;
	padding: 4px;
	margin: 2px;
	text-align: center; /* not working */
	flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
	background-color: #aaa;
}
</style>
</head>

<body>
<nav>
	<ul>
		<a href="#"><li>Once</li></a>
		<a href="#"><li>Upon</li></a>
		<a href="#"><li>A Time</li></a>
		<a href="#"><li>There</li></a>
		<a href="#"><li>Was</li></a>
		<a href="#"><li>A Problematic</li></a>
		<a href="#"><li>Nav Bar</li></a>
	</ul>
</nav>
</body>
</html>

于 2019-05-29T05:22:52.890 回答
0

你采取一个简单的改变

nav {
   display: flex;
   flex-direction: row; /* not working */
   background-color: #d2d6d6;
   padding: 0; /* not working */
}

到

nav ul {
   display: flex;
   flex-direction: row; /* not working */
   background-color: #d2d6d6;
   padding: 0; /* not working */
}


<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav ul {
	display: flex;
	flex-direction: row; /* not working */
	background-color: #d2d6d6;
	padding: 0; /* not working */
}
nav a {
	display: flex;
	text-decoration: none;
	list-style: none;
	border: 2px solid #727171;
	color: #727171;
	background-color: #c4c4c4;
	padding: 4px;
	margin: 2px;
	text-align: center; /* not working */
	flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
	background-color: #aaa;
}
</style>
</head>

<body>
<nav>
	<ul>
		<a href="#"><li>Once</li></a>
		<a href="#"><li>Upon</li></a>
		<a href="#"><li>A Time</li></a>
		<a href="#"><li>There</li></a>
		<a href="#"><li>Was</li></a>
		<a href="#"><li>A Problematic</li></a>
		<a href="#"><li>Nav Bar</li></a>
	</ul>
</nav>
</body>
</html>

于 2019-05-29T06:14:06.893 回答