Question

我正在尝试使用flexbox创建一个导航栏。我想让flexbox中的所有元素在可用空间中水平拉伸。

预期的导航栏是这样：

但是我的导航栏是这样：

我认为您了解我的导航栏在左右两侧留有太多空间的问题。我想通过拉伸所有导航链接来使用整个空间。

我的html代码是：

<html>
    <head>
    <link rel=stylesheet href=ej42.css>
    </head>

    <body>
            <div><ul>
                    <a href=# >HOme</a>
                    <a href=#> about me</a>
                    <a href=#>about you</a>
                    <a href=#> about foo</a>
            </div></ul>
    </body>
 </html>

我的CSS代码是：

a{
    font-weight:bold;
    font-family:monospace;
    text-decoration:none;
    padding:5px;
    text-align:center;
    border-right: 2px solid #555;
}
ul{
    padding:2px;
    display:flex;
    justify-content:center;
    background-color:#555;
}
a:link{
    background-color:#afa;
    color:white;
}
a:visited{
    color:black;
}
a:hover{
    background-color:#8d8;
}
a:active{
    position:relative;
    top:0;
    right:0;
    ul{padding:0;}
    padding:7px;
}

我试图将“ stretch”值用于justify-content属性，但是该方法不起作用，所有链接都向左对齐。我无法按预期制作导航栏。如果您解决我的问题，这将非常有帮助

Answer 1

我认为的唯一方法是将此样式放入“ a”中

a{
  display: block;
   width: 25%;
}

Answer 2

您可以使用flexbox来实现。这将自动填充空间并动态调整以适应新的导航元素。

a {
  font-weight: bold;
  font-family: monospace;
  text-decoration: none;
  width: 100%;
  display: inline-block;
  text-align: center;
  border-right: 2px solid #555;
}

ul {
  padding: 2px;
  background-color: #555;
  justify-content: space-between;
  text-align: center;
  list-style: none;
  width: 100%;
  background: red;
  display: flex;
}

a:link {
  color: white;
}

a:visited {
  color: black;
}

a:hover {
  background-color: #8d8;
}

a:active {
  position: relative;
  top: 0;
  right: 0;
  padding: 7px;
}

li {
  width: inherit;
  border: 1px solid;
}

<html>
  <head>
  <link rel=stylesheet href=ej42.css>
  </head>

  <body>
    <div><ul>
      <li><a href=# >Home</a></li>
      <li><a href=# >About me</a></li>
      <li><a href=# >About you</a></li>
      <li><a href=# >About foo</a></li>
    </div></ul>
  </body>
</html>

如何使用flexbox拉伸导航栏中的所有导航元素

2 个答案: