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;

希望这有效。

Answer 2

这太傻了。我从来没有注意到padding上的a略微过小。我将position: relative添加到li并将height: 100%添加到a，将其删除并废弃。

Answer 3

问题是由#nav上的高度引起的。具有背景颜色的后代元素没有高度，这使得它不会坐在标题的底部。删除高度（或将高度移动到具有背景颜色的元素），它可以正常工作。

如何删除块的最后一个元素下面的所有空白？

3 个答案: