Как создать постоянное пространство между элементами встроенного списка - PullRequest
Новая
       7

Как создать постоянное пространство между элементами встроенного списка

1 голос
/ 22 сентября 2011

Я хочу использовать список для горизонтальных ссылок.Я понимаю, что мне нужно использовать display: block для ul и display: inline для li.

Существует несколько вопросов для получения постоянной ширины для элементов li, но я хочу постоянное пространство между ними, они сами содержат текст различной ширины.

Спасибо.

Я думаю, мой вопрос был неясен:

Я ищу фиксированную ширину ul с неизвестной шириной li элементов и хочу, чтобы между ними было постоянное пространствопостоянная ширина li элементов.Это возможно только с помощью JavaScript?

Ответы [ 2 ]

2 голосов
/ 22 сентября 2011

Используйте свойство margin css. Если все они имеют одинаковое поле, то расстояния между содержимым смежных <li>s будут одинаковыми.

Возможно, вы захотите взглянуть на Box Model

Изменить адрес комментария ниже: Если вы хотите, чтобы промежутки между элементами оставались одинаковыми, независимо от содержимого, поле должно работать. Если вы хотите, чтобы положение элементов оставалось одинаковым независимо от содержимого (и поэтому промежутки между ними будут меняться), вам необходимо установить ширину элемента.

0 голосов
/ 28 мая 2013

Я хотел бы предложить свое решение для этого: http://jsfiddle.net/connectedcat/bZpaG/1/

выдержка из JQuery: 

$(document).ready(function(){
    var nav_width = 0;
    $('nav li').each(function(){
        nav_width += $(this).width();
    });

    var for_each = ($('nav ul').width() - nav_width)/($('nav li').length - 1);
    $('nav li').each(function(){
        $('nav li').css('margin-right', for_each);
    });

    $('nav li:last-child').css('margin-right', 0);
});

Насколько я понял, нет способа сделать это чисто в css, js требуется для определения расстояний для действительно плавного макета. Одна загадка, которая все еще вызывает у меня проблемы в связи с этой проблемой, заключается в том, что разные браузеры отображают шрифты немного по-разному (например, в определенном слове, отображаемом в Safari, может потребоваться 48 пикселей, а в Firefox - 49 пикселей). это, но это приводит к некоторым паразитным пикселям. Если кто-нибудь знает, как сделать его супер аккуратным и чистым на всех платформах - я был бы признателен за обучение:)

...