如何使我的列表项在CSS中提升一点

Question

我是新手，需要一些帮助。 只是为一些练习设计一个随机的网站，我似乎无法让我的标题上的我的topmenu向上移动。我改变了padding＆amp;在一些地方的利润，似乎无法让它工作。不知道我是否遗漏了什么，或者是否有更好的方法来组织我的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

我假设你已经将标题的边距底部和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>