html - 如何删除 block 最后一个元素下方的所有空白区域？

Question

首先我会说这可能是一个非常愚蠢的问题，但无论如何我都会问。

我在一个有标题的网站上工作。所述标题的底部充满了带有四个按钮的导航栏。一切都很好，除了导航栏不是直接位于标题底部，而是底部上方一个像素。

这可能只是一个小小的缺陷，但我会努力改进。请告诉我，我该如何解决这个问题？

HTML如下:

<header>
  <ul id="nav">
    <li><a href="#" id= "home">Home</a></li><!--
    --><li><a href="#" id="sheets">Sheets</a></li><!--
    --><li><a href="#" id="export">Export</a></li><!--
    --><li><a href="#" id=  "help">Help</a></li>
  </ul>
</header>

而我使用的是Sass，如下:

$nav-height: 2em
$header-height: 3em + $nav-height
$nav-button-width: 20%
$nav-padding: (100% - $nav-button-width * 4) / 2

*
  padding: 0
  margin: 0

html
  font-size: 16px

header
  position: relative
  top: 0
  height: $header-height
  background-color: blue

#nav
  position: absolute
  bottom: 0
  height: $nav-height
  width: 100%
  list-style: none
  background-color: blue
  text-align: center

  li
    display: inline

  a
    padding: 0.33em
    display: inline-block
    width: $nav-button-width
    height: inherit
    text-align: center
    background-color: purple
    color: orange

    &:hover
      background-color: indigo

Answer 1

您使用名为“nav”的 id 进行导航。并且您为其添加了“绝对”位置值。你声明这个元素从底部开始的位置是 0。

#nav
  position: absolute
  bottom: 0
  height: $nav-height
  width: 100%
  list-style: none
  background-color: blue
  text-align: center

您可以更改底部值以从底部更改位置。在这种情况下使用 bottom: 1px;

希望这能奏效。