如何组合标题和导航栏

Question

.sticky {
  position: sticky;
  top: 0;
}

#h1 {
  padding: 10px;
  background-color: #ffcc00;
  color: #6600ff;
  text-align: center;
}

#ul {
  background-color: #6600ff;
}

ul {
  list-style-type: none;
  /*oznake v seznamu*/
  margin: 0;
  /*to remove browser default settings*/
  padding: 0;
  /*to remove browser default settings*/
  overflow: hidden;
  /* ce bi b boxsu bilo prevec vsebine*/
  background-color: #1a1aff;
  /*barva navigacije*/
}

li {
  float: left;
}

li a {
  display: block;
  /*kot block elements naredi celotno areo clickable-ne samo tekst*/
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  /*skrijes podcrtano besedilo*/
}

li a:hover {
  background-color: #000033;
  /*barva ozadja ko se postavimo z misko*/
}

<pre>
    <div class="sticky">
    		
    			<h1 id="h1">my web page </h1>
    				
    			<ul id="ul">
    				<li><a href="index.html">Domov</a></li>
    				<li><a href="ponudba.html">Ponudba</a></li>
    				<li><a href="anketa.html">Anketa</a></li>
    				<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
    			</ul>
    		
    </div>
    </pre>

现在，我需要结合使用h1和导航栏，以便在中间没有空格。我尝试将它们与不同的类结合使用，但结果仍然相同，仍然有空间。

我的输出：https://imgur.com/PVDLSrl

我需要它如何：https://imgur.com/9crZBP2

Answer 1

这里的问题是前置标记，您需要删除这些前置标记，然后设置边距：h1为0

#h1{
    padding: 10px;
    background-color: #ffcc00;
    color: #6600ff;
    text-align: center;
    margin: 0; /*Added*/
}

让我知道是否有帮助。

.sticky {
  position: sticky;
  top: 0;
}

#h1 {
  padding: 10px;
  background-color: #ffcc00;
  color: #6600ff;
  text-align: center;
  margin: 0;
  /*Added*/
}

#ul {
  background-color: #6600ff;
}

ul {
  list-style-type: none;
  /*oznake v seznamu*/
  margin: 0;
  /*to remove browser default settings*/
  padding: 0;
  /*to remove browser default settings*/
  overflow: hidden;
  /* ce bi b boxsu bilo prevec vsebine*/
  background-color: #1a1aff;
  /*barva navigacije*/
}

li {
  float: left;
}

li a {
  display: block;
  /*kot block elements naredi celotno areo clickable-ne samo tekst*/
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  /*skrijes podcrtano besedilo*/
}

li a:hover {
  background-color: #000033;
  /*barva ozadja ko se postavimo z misko*/
}

<div class="sticky">

  <h1 id="h1">my web page </h1>

  <ul id="ul">
    <li><a href="index.html">Domov</a></li>
    <li><a href="ponudba.html">Ponudba</a></li>
    <li><a href="anketa.html">Anketa</a></li>
    <li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
  </ul>

</div>