如何在<div> </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>" );

Answer 2

下面应该这样做

.topbar a:not(:last-child){
  margin-right:10px;
}

Demo Fiddle

这将选择菜单中的所有a项，代表菜单选项，并为除最后一项之外的所有项添加右边距。

也就是说，您的HTML无效，您需要将a包含在li个元素中，或将您的HTML更改为：

<div 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>
</div>

Answer 3

广告到您的<a>标签显示：inline-block然后将它们视为div ...放置宽度高度边距和填充。 hope it works;）

.topbar a{
display:inline-block;
line-height:30px/*its standart but u can change it*/
padding:0 5px; /*this will putt space from left and right u can edit it too*/
/*keep in mid that the elemens with inline-block will fitt in the width of their parent element and make a new line if needed*/
}