Как убрать 4 пиксельные отступы после слова? - PullRequest
2 голосов
/ 19 марта 2011

What is happening

На изображении выше, после слова «Контакт», имеется отступ в 4 пикселя, и, если он не выбран, выглядит, что между делителем и обратной связью есть отступ в 5 пикселей и отступ между 9 пикселями.контакт и делитель.Как я могу избавиться от этих 4 пикселей после контакта?

Редактировать: Вот некоторый код.

.vdivider {
    width: 1px;
    height: 10px;
    border-left: 1px solid #666666;
    margin: 0px 5px;
}

<div id="footer">
    <a href="contact.php">Contact</a>
    <span class="vdivider"></span>
    <a href="feedback.php">Site Feedback</a>
</div>

1 Ответ

4 голосов
/ 19 марта 2011

Просмотр вашего кода очень помог бы, но я думаю, я могу догадаться, в чем проблема без него.

Вы используете padding-right для разделения элементов списка и используете границу 1px в качестве разделителя.Проблема с этой техникой - вставка пробелов.Если вы удалите все пробелы из списка, это будет решено.Так что или отформатируйте ваш код следующим образом:

<ul>
    <li>Contact</li><li>Site Feedback</li><li>Another Example</li>
</ul>

Или вот так:

<ul>
    <li>Contact</li><!-- prevent white space insertion
    --><li>Site Feedback</li><!-- prevent white space insertion
    --><li>Another Example</li>
</ul>

РЕДАКТИРОВАТЬ: После просмотра вашего кода, я бы предложил рефакторинг вашего кода вгораздо более семантическая версия: встроенный список.Опять же, это всего лишь предложение.Дайте мне знать, если вы хотите узнать больше о создании этого эффекта с помощью встроенных списков, и я опубликую для вас рабочий код.

EDIT2: http://jsfiddle.net/EqSBT/1/

...