简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimanakah saya boleh menghapuskan ruang putih kecil antara bar navigasi dan bahagian seterusnya? Bagaimana untuk menghilangkan ruang kelabu kecil pada pemilih tuding?
P粉764836448
P粉764836448 2024-02-25 22:54:59
0
1
329

Saya mengekodkan tapak web ini sebagai projek akhir untuk kursus HTMl saya di freecodecamp dan saya menghadapi dua ralat yang saya tidak tahu bagaimana untuk membetulkannya. Di satu pihak, saya mempunyai garis putih kecil antara bar navigasi saya dan bahagian pertama. Sebaliknya, saya menggunakan pemilih tuding untuk menjadikan latar belakang pautan bar navigasi berwarna kelabu tetapi masih mengekalkan garis gelap kecil di bahagian bawah.

Garis putih kelihatan seperti ini:

Untuk membetulkan garis putih pertama, saya cuba mengalih keluar padding dan margin (ini mengalih keluar beberapa ruang putih di tepi, tetapi bukan ruang putih yang tinggal di antara dua bahagian. Saya juga menukar semua latar belakang CSS kepada biru. Bahagian mana yang mengisi ruang , dan ia hanya bertukar biru apabila saya menukar latar belakang badan, yang sudah mempunyai margin dan padding ditetapkan kepada 0

.

Beginilah rupa garis hitam kecil itu: Seperti yang anda boleh lihat, terdapat garis hitam kecil di bawah latar belakang kelabu!

Untuk ini, saya cuba memahami ruang tepat yang diduduki oleh tab berbeza dalam bar navigasi (li, ul, a...) tetapi tidak berjaya, saya benar-benar tidak faham bagaimana tab ini memutuskan untuk menggunakan ruang atau tidak dalam bar navigasi. Saya tidak menemui sebarang label yang menggunakan ruang garis hitam tambahan.

Ini ialah HTML: 

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Double Team Cooking</title>
    <link rel='stylesheet' href='styles.css'>
  </head>
  <body>
    <section id="welcome">
      <nav id='navbar'>
        <ul>
          <li><a href="#whodis">Who Am I?</a></li>
          <li><a href="#Projectos">My Projects</a></li>
          <li><a href="#hola">Contact</a></li>
        </ul>
      </nav>
    </section>
      
      
    <section id='Who-Am-I'>
      <h2 id='whodis'>Who Am I?</h2>
      <p> Hey, I'm Pedro.</p>
      <p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
    </section>

    <section id='Projects'>
      <h2 id='Projectos' class="project-title">My Projects</h2>
      <p>So, what am I working on?</p>
      <div id="electriccar"></div>
      <div id="website"></div>
      <div id="TWR"></div>
    </section>

    <section id="Contact">
      <h2 id="hola">Contact Me</h2>
      <p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
    </section>
    
  </body>
</html>

Ini ialah CSS: 

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  width: 100%;
  padding: 0px;
  margin: 0px;
}



nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: rgb(24,24,24);
}

nav ul {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  padding-left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  align-items: center;
  
}

nav li {
  display: inline-block;
  
  
}

li a {
  text-decoration: none;
  color: white;
  padding: 10px;
  
}

li a:hover {
  background-color: rgb(64,64,64);

}

#Who-Am-I {
  height: 100%;
  background-color: rgba(0,30,0,0.8);
}

Terima kasih banyak atas bantuan anda!

P粉764836448
P粉764836448

membalas semua(1)
P粉116631591
P粉1166315912024-02-26 20:41:45 Tingkat 1

Cubalah

* {
  padding: 0;
  margin: 0;
}
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！