Как отрегулировать расстояние между элементами, находящимися на моей панели инструментов?

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 model, если вы не слышали об этом раньше. Эти идеи используются повсюду в веб-разработке, и лучше всего читать и понимать это, а не просто получать некоторые css из Интернета, не понимая этого.

Answer 3

Я также хотел бы указать, что все ваши элементы списка имеют одинаковый идентификатор. У вас может быть только один элемент на странице с этим идентификатором. И, видя, что вы дали всему списку имя класса, вы должны просто избавиться от id вместе.