html - 使用 flex 的麻烦

Question

我是 Web 开发的新手，我正在尝试使用 flex 做一些练习，我想尝试一下这个标题：

...但不知何故我不能让标题有一个白色的背景：

body {
  background: gray;
}

header {
  background: white;
}

ul.header-nav {
  list-style: none;
  display: flex;
}

ul.header-nav.left {
  float: left;
}

ul.header-nav.right {
  float: right;
}

<header>
  <nav>
    <ul class="header-nav left">
      <li>Home</li>
      <li>Plans</li>
      <li>Products</li>
      <li>About</li>
      <li id="gift">Gift</li>
    </ul>
    <ul class="header-nav right">
      <li>Help</li>
      <li>Sign In</li>
      <li>Cart</li>
    </ul>
  </nav>
</header>

标签： htmlcssflexbox

Answer 1

使用display:flex代替float

body{
    background: gray;
}

header{
    background: white;
}

nav{
      display: flex;
}

ul.header-nav{
    list-style: none;
    display: flex;
}

ul.header-nav.left{
    float: none;
}

ul.header-nav.right{
    float: none;
}

<header>
    <nav>
        <ul class="header-nav left">
            <li>Home</li>
            <li>Plans</li>
            <li>Products</li>
            <li>About</li>
            <li id="gift">Gift</li>
        </ul>
        <ul class="header-nav right">
            <li>Help</li>
            <li>Sign In</li>
            <li>Cart</li>
        </ul>
    </nav>
</header>