Выравнивание двух линий горизонтальных линий равномерно с CSS

Question

У меня есть 6 ссылок, все разные длины символов на двух строках. Мне нужно все для равномерного выравнивания. Как это:

Home  About Us  Location 
Contact Visit  Schedule 

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

<div class="footer"> 
<ul id="footerlinks"> 
    <li><a href="link 1">Home</a></li> 
    <li><a href="link 2">About Us </a></li> 
    <li><a href="link 3">Location</a></li> 
<br> 
    <li><a href="link4">Contact</a></li> 
    <li><a href="link5">Visit</a></li> 
    <li><a href="link6">Schedule</a></li> 
</ul> 

Answer 1

Зафиксировать ширину <ul> и <li>. И удалите <br />, что делает разметку недействительной.

HTML

<ul id="footerlinks"> 
    <li><a href="link 1">Home</a></li> 
    <li><a href="link 2">About Us </a></li> 
    <li><a href="link 3">Location</a></li> 
    <li><a href="link4">Contact</a></li> 
    <li><a href="link5">Visit</a></li> 
    <li><a href="link6">Schedule</a></li> 
</ul> 

CSS

#footerlinks { width: 300px; } 
#footerlinks li { width: 100px; display: inline-block; } 

Demo

Demo(with white-space fix)

Answer 2

Дайте Ли элементы отображения свойство инлайн-блока и шириной. Вот jsfiddle, чтобы продемонстрировать:

li { display: inline-block; width: 100px; } 

Answer 3

Проверьте это:

<pre> 
test 
&#x09;test 
&#x09;&#x09;test 
</pre> 

Источник: How do I create tab indenting in html

Answer 4

Во-первых, <br/> не является допустимым дочерним элементом <ul/>.

Чтобы применить ширину к <li/>, вам нужно будет сделать элемент уровня блока.

<ul id="footerlinks"> 
    <li><a href="link 1">Home</a></li> 
    <li><a href="link 2">About Us </a></li> 
    <li><a href="link 3">Location</a></li> 
    <li><a href="link4">Contact</a></li> 
    <li><a href="link5">Visit</a></li> 
    <li><a href="link6">Schedule</a></li> 
</ul>​ 

и

#footerlinks { 
    background:#ccc; 
    overflow:hidden; 
    padding:5px; 
    width:300px; 
} 

#footerlinks li { 
    float:left; 
    padding:5px 0; 
    width:33%; 
}​ 

Вот рабочий пример - http://jsfiddle.net/jaredhoyt/xbvyP/