html - 如何让我的列表项在 CSS 中向上移动一点

Question

我是新手，需要一点帮助。 只是为一些练习设计一个随机网站，我似乎无法让我的标题上的顶部菜单向上移动。我在几个地方更改了填充和边距，但似乎无法正常工作。想知道我是否遗漏了什么，或者是否有更好的方法来组织我的 CSS。任何帮助将不胜感激。谢谢:)

#main {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

body {
    margin:0;
}

#topbar {
    background-color: black;
    height: 80px;
    width: 100%;
    margin-top: 0;
    margin-bottom:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

#text {
    display:block;
    color: White;
    float:right;
    padding-right: 820px;
    padding-top: 10px;
    font-size:20px;
}

#topmenu {
    display:block;
    list-style:none;
    padding:0 400px 0px 0px;
    float: right;

}

#topmenu li {
    display: inline;
}

#topmenu a {
    position:relative;
    padding:0 4px 0 4px;
    font-size: 13px;
    text-decoration:none;

}

#topmenu a, #topmenu a:visited, #topmenu a:active {
    color:white;
}

I want the menu to move up ever so slightly.

<div id="topbar" >
<div id="text"><strong>My Template Website</strong></div>
<div id="topmenu">
    <ul>
        <li><a href=""/>Home</li>
        <li><a href=""/>About Us</li>
        <li><a href=""/>Services</li>
        <li><a href=""/>Product</li>
        <li><a href=""/>Contact Us</li>
    </ul>   

Answer 1

我假设您已经将标题的 margin-bottom 和 topmenu 的 margin-top 减少为 0，现在您需要一种无需绝对定位即可将 topmenu 调高一点的方法。您可能不知道的是，允许在菜单上使用负边距来调出它:

#topmenu {
  /* ... your other styles */
  margin-top: -15px;
}

在应用这个之前，你应该检查你的 ul 的边距，它可能有浏览器默认样式表的边距:

您可以在 Web 控制台中调试页面时自行检查(所有流行的浏览器都有一个；例如，在 Firefox 中，您必须按 F12)。

我不知道您网站的其余部分是什么样的，也不知道周围的 div#topmenu 是否真的需要。但如果没有，您可以删除它并将 id 提供给 ul，然后从您的new #topmenu 中删除 margin-top。这样做的好处是您不必管理两个不同的元素，这可能是您在此示例中混淆的原因。

<div id="topbar" >
  <div id="text"><strong>My Template Website</strong></div> <!-- <h1> instead for semantic reasons? -->
  <ul id="topmenu">
    <li><a href=""/>Home</li>
    <li><a href=""/>About Us</li>
    <li><a href=""/>Services</li>
    <li><a href=""/>Product</li>
    <li><a href=""/>Contact Us</li>
  </ul>
</div>