css 中的条形图未使用 flex 重新排列

Question

我在 css 中有一个 flex 的工作代码。虽然按钮正在重新对齐，但蓝色条没有移动。由于这种改变屏幕尺寸使得所有按钮似乎都消失了。

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body
{
    background-image: url(background.jpg);
    background-size: cover;
    background-position : center;
    
    font-family: sans-serif;
}

.menu-bar
{
    background: #273044;
    text-align: center;
    height:30px;
     
}
.menu-bar ul
{
    display: inline-flex;
    list-style: none;
    color: #fff;
    
}

.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
 
padding: 5px;  
}

.menu-bar ul li a
{
text-decoration: none;
color: white;   
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;

height:30px;
} 

.toggle-button{
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 31px;
    height: 21px;
}

.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;

}

@media(max-width: 700px){
    .toggle-button{
        display:flex;
    }
    .menu-bar-links{
        /* display:none; */
        width:100%;
    }
    .menu-bar{
        flex-direction: column;
        align-items: flexstart;
    }
    .menu-bar-links ul{
        width:100%;
        flex-direction: column;

    }
    .menu-bar-links li{
        text-align: center;
    }
}


/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

这是我的HTML代码：

<html>
    <head> 
        <title> Title of page    </title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
    </head>

<!----header----> 
    <body> 
        <div class="menu-bar">
            <a href = "#" class="toggle-button">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>

            </a>
            <div class="menu-bar-links">
                <ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Investors</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Training </a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
     </div>



        <!-- <div class= "grid"> 
            
        </div> -->

    </body>
</html>

这是全屏时的样子：

当我重新排列屏幕时，它看起来像这样：如您所见，所有按钮似乎都消失了，除了悬停在

上方的按钮

即使

也不居中

.menu-bar-links li{
        text-align: center;

Answer 1

您遇到的问题是 .menu-bar 的高度固定，即 height: 30px。您最好删除它，为演示添加一些填充，并使 .menu-bar 元素成为 flex 容器。

Link 到 CodePen:

https://codepen.io/thechewy/pen/QWQQMjg

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.menu-bar {
  background: #273044;
  text-align: center;
  /*   height: 30px; */
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-bar ul {
  display: inline-flex;
  list-style: none;
  color: #fff;
}

.menu-bar ul li {
  width: 120px;
  place-items: center;
  display: grid;
  padding: 5px;
}

.menu-bar ul li a {
  text-decoration: none;
  color: white;
}
.active,
.menu-bar ul li:hover {
  background-color: #0b56ab;
  height: auto;
  height: 30px;
}

.toggle-button {
  position: absolute;
  right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 31px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .toggle-button {
    display: flex;
  }
  .menu-bar-links {
    /* display:none; */
    width: 100%;
  }
  .menu-bar {
    flex-direction: column;
    align-items: flexstart;
  }
  .menu-bar-links ul {
    width: 100%;
    flex-direction: column;
  }
  .menu-bar-links li {
    text-align: center;
  }
}

<html>
<head>
  <title> Title of page </title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
</head>

<body>
  <div class="menu-bar">
    <a href="#" class="toggle-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="menu-bar-links">
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Investors</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Training </a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

css 中的条形图未使用 flex 重新排列

Bar not rearranging with flex in css

css