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

Question

我创建了一个工具栏，并且有 3 个列表元素：“主页”、“联系人”、“关于我”。目前，它们与分隔它们的边界并排，但是我想在元素之间给出间距。我的代码如下所示：

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 模型，请查看它。这些想法在整个 Web 开发过程中都会用到，最好阅读并理解这一点，而不是在不理解的情况下从网上获取一些 CSS。

Answer 3

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