html - 如何组合标题和导航栏

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

这里的问题是 pre 标签，你需要删除它们然后设置边距: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>