Выравнивание контента в div без ячеек таблицы - PullRequest
Новая
       13

Выравнивание контента в div без ячеек таблицы

3 голосов
/ 26 мая 2010

У меня есть два ряда ссылок, таких как: 

Link 1     Link 2     Link 3     Link 4
Link 5     Link 6     Link 7     LInk 8

Мне нужно, чтобы четыре верхние ссылки соответствовали верхним нижним ссылкам независимо от количества символов в ссылке. Например, 

This is link 1     This is link 2            Link 3     L4
LInk 1             Link 2 that is longer     Link 3     L4

Я могу сделать это с помощью таблиц и ячеек td, но как это можно сделать, просто используя div?

Ответы [ 2 ]

3 голосов
/ 26 мая 2010 
<ul id="links">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

CSS: 

#links {
    list-style: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#links li {
    width: 25%;
    margin: 5px 0px;
    padding: 0px;
    float: left;
}
0 голосов
/ 30 мая 2017

Просто добавив div с помощью display: inline-block;, вы можете получить желаемое выравнивание. 

div {
  display: inline-block;
  width: 25%;
}
<div><a>This is link 1</a></div><div><a>This is link 2</a></div><div><a>Link 3</a></div><div><a>L4</a></div>
<div><a>LInk 1</a></div><div><a>Link 2 that is longer</a></div><div><a>Link 3</a></div><div><a>L4</a></div>

Примечание 1:

Между делителями строки нет пробелов.Это намеренно.Это причуды display: inline-block;.Добавление пробелов будет тормозить макет.Если вам нужно иметь пробелы между div, то обычным решением является применение отрицательного поля:

margin: 0px -4px;

Примечание 2:

У делений не должно быть никаких других отступовили поля.В противном случае макет сломается.

...