如何调整工具栏中元素之间的间距？

Question

我创建了一个工具栏，我有3个列表元素：“Home”，“Contacts”，“About Me”。 目前，它们并排分隔它们的边界，但是我想在元素之间给出间距。我的代码如下所示：

HTML：

<div class="Nav">
    <ul>
        <li id="Toolbar">Home</li>
        <li id="Toolbar">Contacts</li>
        <li id="Toolbar">About Me</li>
    </ul>
</div>

Answer 1

为每个li

添加保证金

.Nav li{
   margin: 0px 3px; /* Adjust the px to meet your needs */
}

JSFIDDLE： http://jsfiddle.net/6Mc9W/

Answer 2

有几种不同的方法可以分隔元素。如果您之前没有听说过，请查看CSS Box model。这些想法在整个Web开发过程中都被使用，最好是阅读并理解这一点，而不是仅仅从网上获取一些css而不理解它。

Answer 3

我还想指出所有列表项都具有相同的ID。您只能在页面上有一个具有该ID的元素。并且看到你给整个列表一个类名，你应该只是把它们放在一起。