弹性框的呈现方式应该像列一样，但应该是一行 [英] Flex box rendering like a column when it should be a row
问题描述
我正在整理应该是一个简单的导航栏，并使用flex box进行样式设置.由于某种原因，它没有显示为行(水平)，而是显示为列(垂直).
I am putting together what should be a simple nav bar and styling with flex box. For some reason, instead of displaying as a row (horizontal), it is showing as a column (vertical).
我可以使用float:left使链接变为水平，但是这样它们就不能均匀伸展以填充导航栏.
I can make the links go horizontal using float:left, but then they don't stretch evenly to fill the nav bar.
My understanding is that flex-grow:1 should make each item occupy an equal amount of space. But this is not happening.
有四个声明无法正常工作:
There are four declarations that are not working as expected:
flex-direction 导航栏中的链接位于一列而不是一行
padding 尽管导航栏的padding设置为零，但它似乎仍然具有padding
文本对齐 每个< li> 中的文本都不会水平居中
text-align The text within each <li> is not getting horizontally centered
flex-grow 链接的间距不均匀
我不确定它们是否全部源于一个问题或每个单独的问题.
I'm not sure if they are all stemming from to one problem, or each separate problems.
这是一个简化的代码段:
Here is a simplified snippet:
<!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>我以前曾经多次使用flex box，但从未见过它像这样的行为.
I've used flex box plenty of times before, but never seen it behave like this.
推荐答案
您的代码中有一个小错误，这是已纠正的错误，您已将所有属性赋予Nav，而您需要将其分配给UL，
There is a small mistake in your code, here is the corrected one, You have given all the properties to Nav, while you need to assign these to UL,
- 无需提供flex-direction:row，因为这是默认属性.
- 填充也正在工作，请检查.
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>这篇关于弹性框的呈现方式应该像列一样，但应该是一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
