0

您好，我在 HTML/CSS 中有一个非常简单的代码，我只想将名为 header1 的前 2 个块粘贴为蓝色，将 header2 粘贴为红色。我希望这两个块之间没有空白。

这是代码：

/* style22.css */


/* Définition des caractéristiques globales */

body {
  background-color: #FFF;
  font-weight: 400;
}

a {
  text-decoration: none;
  / color: #FFF;
}


/* Header */

#conteneur {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header1 {
  background: blue;
}


/* Navigation */

nav ul {
  list-style-type: none;
  display: flex;
  background: red;
}
<header id="conteneur">

  <div class="header1">
    <div><a href="how.html"><span class="logo">ALGOBETTER</span></a></div>
  </div>

  <nav class="header2">
    <ul>
      <li><a href="gold_rules.html">Règles d'or</a></li>
      <li><a href="pronos.html">Pronostics</a></li>
    </ul>
  </nav>
</header>

也许你可以帮忙。谢谢

4

3 回答 3

5

添加margin: 0;到 ul （默认情况下，无序列表的边距不同于 0）：

a {
  text-decoration: none;
}


/* Header */

#conteneur {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header1 {
  background: blue;
}


/* Navigation */

nav ul {
  list-style-type: none;
  display: flex;
  background: red;
  margin: 0;
}
<div class="header1">
  <div><a href="how.html"><span class="logo">ALGOBETTER</span></a></div>
</div>

<nav class="header2">
  <ul>
    <li><a href="gold_rules.html">Règles d'or</a></li>
    <li><a href="pronos.html">Pronostics</a></li>
  </ul>
</nav>

于 2020-11-21T19:57:36.970 回答
4

您的空白是ul由.header2. 只需添加nav ul { margin: 0; }即可删除空格。

/* style22.css */


/* Définition des caractéristiques globales */

body {
  background-color: #FFF;
  font-weight: 400;
}

a {
  text-decoration: none;
  / color: #FFF;
}


/* Header */

#conteneur {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header1 {
  background: blue;
}


/* Navigation */

nav ul {
  list-style-type: none;
  display: flex;
  background: red;
  margin: 0;
}
<header id="conteneur">

  <div class="header1">
    <div><a href="how.html"><span class="logo">ALGOBETTER</span></a></div>
  </div>

  <nav class="header2">
    <ul>
      <li><a href="gold_rules.html">Règles d'or</a></li>
      <li><a href="pronos.html">Pronostics</a></li>
    </ul>
  </nav>
</header>

于 2020-11-21T19:57:53.693 回答
1

在你的 CSS 中尝试：

*{
   margin:0;
   padding:0;
}
于 2020-11-21T19:53:16.100 回答