Проблема с границей панели навигации

Я работаю над новой домашней страницей, пытаясь максимально избегать изображений, и у меня есть небольшая проблема с границами на панели навигации. Я не могу придумать, как заставить стороны границ соединиться друг с другом с помощью заполнения. На данный момент стороны не соприкасаются, так что это не выглядит непрерывно. Я могу упустить что-то очевидное, но я не могу придумать способ встретиться с ними. У кого-нибудь есть идеи?

Единственный способ, которым я могу решить эту проблему, - это классы для каждого из элементов li, но мне интересно, есть ли дополнительный способ.

Вот Fiddle для вас, чтобы проверить:

http://jsfiddle.net/WZF4M/


css border
person Community    schedule 14.09.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Возможно, вы захотите использовать следующее в стиле li? Твик, хотя; не проверено во всех браузерах.

li{
    display: inline;
    margin-right: -5px; /*Add this*/
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}

Вариант 2: -

Более элегантное решение прямо здесь, в SO.

Как удалить дополнительное пространство на полях, созданное встроенным блокирует?

Возможно, вам придется внести изменения в свой html для этого.

<ul>
    <li>Test</li><li>Apple</li><li>Cat</li><li>Dog</li>
</ul>
person ram    schedule 14.09.2012
comment
Это был бы принятый ответ, если бы я мог заставить его работать в Firefox. По какой-то причине он переходит на следующую строку :/ - person ; 14.09.2012
comment
Да, это помогло. Firefox по-прежнему доставляет некоторые неудобства из-за того, что нижняя граница перекрывается на 1 пиксель по сравнению с другими браузерами, но проблема с пробелами, безусловно, странная! - person ; 14.09.2012

arrow_upward
1
arrow_downward

Попробуйте этот пример jsFiddle. Я плавал элементы списка слева вместо того, чтобы отображать их внутри. Это убирает промежутки между ними. Затем я расположил сам список относительно и немного сдвинул его вверх.

CSS:

ul{
    float: right;
    position:relative;
    top:-14px;
}
li{
    float:left;
    padding: 11px 12px 11px 12px;
    border: solid 1px #c1c1c1;
}
person j08691    schedule 14.09.2012

arrow_upward
0
arrow_downward

Что вы можете сделать, чтобы придать этому более непрерывное ощущение, так это использовать border-right только для ваших li элементов в вашем меню.

http://jsfiddle.net/WZF4M/3/

Я обновил вашу скрипку.

Дайте мне знать, если это то, что вы искали.

person Jrod    schedule 14.09.2012