使用flex麻烦

Question

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

...但是以某种方式我无法使标题具有白色背景：

import pygame as pg


pg.init()
screen = pg.display.set_mode((640, 480))
clock = pg.time.Clock()
BG_COLOR = pg.Color('gray12')
image_normal = pg.Surface((30, 50))
image_normal.fill(pg.Color('dodgerblue'))
image_bright = image_normal.copy()
image_bright.fill((100, 100, 100, 0), special_flags=pg.BLEND_RGBA_ADD)
image = image_normal  # The currently selected image.
timer = 0
dt = 0

done = False
while not done:
    for event in pg.event.get():
        if event.type == pg.QUIT:
            done = True
        elif event.type == pg.MOUSEBUTTONDOWN:
            image = image_bright  # Swap the image.
            timer = .5  # 0.5 seconds.

    timer -= dt
    if timer <= 0:
        image = image_normal  # Set the image back to the normal version.
        timer = 0

    screen.fill(BG_COLOR)
    screen.blit(image, (300, 200))
    pg.display.flip()
    dt = clock.tick(60) / 1000

pg.quit()

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;
}

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>

Answer 2

如果您已经决定使用float，则不需要flex。

body {
  background: gray;
}

header {
  background: white;
}

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

nav {
  display: flex;
  justify-content: space-between;
}

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

Answer 3

您没有显示backgroundcolor的问题是因为它的高度是0px。您可以使用浏览器开发工具进行验证。这是Why My Css Code Is Not Working For My Html Header And Footer?

讨论的类似问题

使用display：flex之后，您也不需要使用float。

* {
  margin: 0;
  padding: 0;
}

body { background: gray; }
header { background: white; }

nav {
  display: flex;
  justify-content: space-between;
}

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


ul.header-nav li {
  margin-right:10px;
}

<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>