如何在 <div> 之间添加间距 [重复]

Question

所以我在页面顶部有一个菜单，但我不知道如何在按钮之间添加间距。我只想在按钮之间留一点空间，这样它们就不会显得那么草率了。

这是我的菜单。代码在它下面。

HTML：

<div>
  <ul class="topbar">
    <a href="pages/index.html" class="fade">Home Page</a>
    <a href="pages/userprofile.html" class="fade">Profile</a>
    <a href="pages/createacc.html" class="fade">Create an Account</a>
    <a href="pages/settings.html" class="fade">User Settings</a>
    <a href="pages/contact.html" class="fade">Contact Us</a>
  </ul>
</div>

CSS

ul
{
    list-style-type: none;
    padding:0;
    margin:0;
}

/****************************/

.topbar {
    width: 700px ;
    Height:initial;
    background-color: #2b2b2b;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

Answer 1

你的“按钮”应该放在列表项<li>

<div>
  <ul class="topbar">
    <li><a href="pages/index.html" class="fade">Home Page</a></li>
    <li><a href="pages/userprofile.html" class="fade">Profile</a></li>
    <li><a href="pages/createacc.html" class="fade">Create an Account</a></li>
    <li><a href="pages/settings.html" class="fade">User Settings</a></li>
    <li><a href="pages/contact.html" class="fade">Contact Us</a></li>
  </ul>
</div>

关于样式和间距...

ul.topbar {
    width: 700px ;
    background-color: #2b2b2b;
    margin:0;
    padding:0;
}

ul.topbar li
{
    list-style-type:none;
    display:inline-block;
    padding:0 10px;
}

ul.topbar a
{
    font-family:Arial;
    color:#950095;
    text-decoration:none;
}

ul.topbar a:hover
{
    color:#FFF;
    text-decoration:underline;
}

您可以查看here：

如果出于某种奇怪的原因，您无法访问生成菜单的代码，您可以使用一些 jQuery 将 <li> 包裹在您的 <a> 周围：

$( "ul.topbar a" ).wrap( "<li></li>" );