Обоснованное меню CSS не работает без разрывов строк между <li>

Question

Я разрабатываю собственный шаблон WordPress для некоторых друзей и хочу горизонтальное меню.Все было бы хорошо, за исключением того, что wp_page_menu выводит элементы списка все в одну строку, которая (после МНОГО! Царапин на голове), кажется, нарушает форматирование и удаляет все пространство между элементами.Например, следующие выходы 1, 2 и 3 разнесены, а затем 456 все вместе.(Протестировано в Safari, Firefox и Chrome, все на Mac.)

<style>

.menu {
    text-align: justify;
    width: 700px;
    margin: 10px;
}

.menu * {
    display: inline;
}

.menu span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

</style>

<div class="menu">
    <ul>
        <li><a href="http://localhost/">1</a></li>
        <li><a href="http://localhost/">2</a></li>
        <li><a href="http://localhost/">3</a></li>
        <li><a href="http://localhost/">4</a></li><li><a href="http://localhost/">5</a></li><li><a href="http://localhost/">6</a></li>
    </ul>
    <span></span>
</div>

У меня уже есть пользовательская функция, редактирующая вывод из wp_page_menu, чтобы добавить диапазон после ul, так что я думаю, самая простая вещьЧтобы сделать это, нужно расширить эту функцию, чтобы добавить разрывы строк, но если у кого-то есть другие идеи или вы можете сказать мне, почему это происходит (особенно это!), это было бы здорово.

РЕДАКТИРОВАТЬ:

Исправили это сейчас, добавив функцию, которая вставляет пробел в html (код ниже, если кому-то интересно сейчас или кто-то сталкивался с этим в будущем).Кажется, это было все, что было необходимо!Было бы еще интересно узнать, может ли кто-нибудь сказать мне, зачем это нужно.

// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
    return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');

Answer 1

Чтобы ответить на ваш вопрос, вот как работает xHTML.Если у вас есть следующее:

<a href="#">test</a><a href="#">test1</a>

Это будет выглядеть как

testtest1

И если у вас есть следующее:

<a href="#">test</a> <a href="#">test1</a>

Это будет отображаться как

test test1

Теперь та же логика работает для <li> элементов, а также для различных другихселекторы, такие как <img> селекторы.

У вас был заголовок с тремя изображениями в строке, но когда вы пытались это сделать:

 <img src="#" />
 <img src="#" />
 <img src="#" />

Это вставит пробел ( ) после каждого изображения, в то время как их в строке не будет.

Ваша функция выполняет именно то, что вы хотели.Вы могли бы сделать это, используя Javascript или CSS, но ваше решение лучше.На случай, если вам интересно, вот как это сделать с помощью CSS:

.menu li:before {
    content:' ';
}

Надеюсь, это помогло.

Answer 2

Вы можете просто отказаться от тега li и просто сделать их div с тем же именем класса.

Answer 3

Если я правильно понимаю - вам действительно нужен табличный макет.Попробуйте добавить это к CSS:

.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }

Answer 4

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

.menu * {
   display: inline;
}

вместо

.menu li{
   float:left;
   padding:0 5px;
   list-style:none;
}

Полагаю, я немного приукрашен другими вещами, но попробую!