我的CSS flexbox无法在任何浏览器上运行

问题描述

这些天我正在学习CSS。我正在使用CSS Flexbox设计导航栏。这是我的html和CSS代码，但它们在我的浏览器上不起作用。有人可以找到任何问题吗？

* {
  margin: 0px;
  padding: 0px;
}


/* Navigation Bar */

#navbar {
  display: flex;
  align-items: center;
  flex-direction: row;
  top: 0px;
}

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

<head>
  <meta charset="UTF-8">
  <title>Website Page</title>
  <link rel="stylesheet" href="/originals/style.css">
</head>

<body>
  <nav id="navbar">
    <div id="logo">
      <img src="logo.png" alt="MyOnlineMeal.com">
    </div>
    <ul>
      <li class="item"><a href="#home">Home</a></li>
      <li class="item"><a href="#services-container">Services</a></li>
      <li class="item"><a href="#client-section">Our Clients</a></li>
      <li class="item"><a href="#contact">Contact Us</a></li>
    </ul>
  </nav>

</body>

</html>

解决方法

display：flex属性仅适用于flex容器内的直接子元素。我猜想您也希望列表项也“弯曲”，以便做到这一点-您需要将显示弯曲应用于ul和导航。

换句话说，导航栏将display flex仅应用于包含图像图像和ul的div。为了对齐和隔开列表项-ul还必须是flex容器。我正在使用空格来隔开列表项-但显然您可能需要更改样式以适合您的需求。

*{
    margin: 0px;
    padding: 0px;
}
/* Navigation Bar */
#navbar{
    display: flex;
    align-items: center;
    flex-direction: row;
    top: 0px;
}


#navbar ul{
    display: flex;
    align-items: center;
    flex-direction: row;
    top: 0px;
    list-style: none;
    flex-grow: 1;
    justify-content: space-between;
    margin-left: 32px
}

<nav id="navbar">
   <div id="logo">
       <img src="logo.png" alt="MyOnlineMeal.com">
    </div>
    <ul>
       <li class="item"><a href="#home">Home</a></li>
       <li class="item"><a href="#services-container">Services</a></li>
       <li class="item"><a href="#client-section">Our Clients</a></li>
       <li class="item"><a href="#contact">Contact Us</a></li>
     </ul>
 </nav>

我不确定您要实现的目标，我想您需要导航栏中的所有项目均匀分布在页面顶部的水平线上。如果您需要这样做，请注意以下几点：

主要问题是display: flex将仅分发具有该属性的框的直接子级。就您而言，这意味着弹性项目是徽标div和ul的整体，它将不会在ul内分发项目。为了获得后一种效果，您还需要将ul显示设置为可弯曲。
您正在使用align-items属性来配置弹性项目对齐方式，但是此属性将项目沿与弹性方向相反的方向对齐。当您的伸缩方向为行时，align-items: center将它们从上到下在中心垂直对齐。您不会在这里注意到它的效果，因为默认情况下容器的高度与其内容相同，因此不能为项目分配不同的垂直位置。但是，如果为flex容器指定更大的高度，则会注意到所有flex项目将出现在flex容器高度的中间；在外部flex容器中将ul项对准徽标高度的中间部分可能很有用。
您应尝试使用属性justify-content使Flex项在Flex容器的相同方向上对齐，在这种情况下为水平对齐。尝试为此属性检查不同的值，例如space-around或space-evenly，以实现所需的分布。
此处不需要top属性，除非您将其与定位元素一起使用。您需要将其与position属性的某些值一起使用。

CSS flexbox处理直接子元素到已应用flexbox的父元素的行和列对齐。例如，在您的代码中：

<nav id="navbar">是包含直接子元素 <div id="logo">和 <ul>的父元素， <div id="logo">和 <ul>中的任何内容都不是直接子元素到<nav id="navbar">。因此，如果您观察到<div>
，包含<ul>的徽标和包含#navbar ul{ display: flex;}的链接列表彼此水平对齐
为了使链接列表在水平方向上彼此相邻，就像徽标和列表一样，您需要使<ul>元素显示灵活，因为<ul>是直接父元素元素到<li>元素；并且由于flex-direction的默认值为row，因此您可以根据需要设置它的值，也可以不设置。希望这有助于阐明您的概念。继续学习！

#navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#navbar > ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#navbar > ul > li{
  margin-right: 0.875rem;
  list-style-type: none;
}

<nav id="navbar">
   <div id="logo">
       <img src="logo.png" alt="MyOnlineMeal.com">
    </div>
    <ul>
       <li class="item"><a href="#home">Home</a></li>
       <li class="item"><a href="#services-container">Services</a></li>
       <li class="item"><a href="#client-section">Our Clients</a></li>
       <li class="item"><a href="#contact">Contact Us</a></li>
     </ul>
 </nav>

flexbox html

我的CSS flexbox无法在任何浏览器上运行

问题描述

解决方法

相关问答