0

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

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

这可能只是一个小小的缺陷，但我的目标是改进。祈祷告诉，我该如何解决这个问题？

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
4

3 回答 3

0

您在导航中使用一个名为“nav”的 ID。并且您为其添加了“绝对”位置值。你声明这个元素从底部的位置是0。

#导航
  位置：绝对
  底部：0
  高度：$导航高度
  宽度：100%
  列表样式：无
  背景颜色：蓝色
  文本对齐：居中

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

希望这有效。

于 2013-08-21T12:22:48.200 回答
0

这很愚蠢。我从来没有注意到。padding就a有点太小了。我将其删除并通过添加position: relative到li和height: 100%使其过时a。

于 2013-08-21T12:40:31.903 回答
0

问题是由 上的高度引起的#nav。具有背景颜色的后代元素没有高度，这给人一种错觉，即它没有位于标题的底部。删除高度（或将高度移动到具有背景颜色的元素），它会按预期工作。

于 2013-08-21T13:42:30.977 回答