CSS разметка без таблиц - PullRequest
Новая
       7

CSS разметка без таблиц

1 голос
/ 30 декабря 2010

Все в Интернете указывает на то, что я перестал использовать таблицы, что я старался изо всех сил, но я столкнулся с проблемой, для которой таблицы, похоже, являются единственным решением. У меня есть 5 элементов inline-block, которые я хочу распределить равномерно по 100% ширины страницы. Я установил ширину в 20% для стиля и установил поля и отступы на ноль. Когда я просматриваю страницу, все выглядит довольно хорошо, за исключением горизонтальной полосы прокрутки, добавленной на страницу. Если я помещу эти элементы в таблицу шириной 100% с 5 столбцами, это не проблема. В этом случае мне нужно использовать таблицу или есть лучшее решение?

Кстати, я пробовал это и в Chrome, и в IE8.

Обновление: кое-что, что я обнаружил, заключается в том, что между моими элементами вставляется промежуток в ~ 5 пикселей (найденный путем наложения на них цвета фона). Я понятия не имею, почему, поскольку ничто в моих стилях не обозначает это: 

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

.links { пустое пространство: nowrap; ширина: 100%; }

.links a { дисплей: встроенный блок; ширина: 20%; отступы: 0; поле: 0; белый цвет; цвет фона: # 4C8331; } * +1010 *

Еще одно обновление:

После того, как JMC Creative указал на мою глупую ошибку, поставив пробелы между якорями, которые почти устранили проблему, но теперь есть один пиксель полосы прокрутки. Я не вижу унаследованного стиля, который должен вызывать это.

Ответы [ 5 ]

2 голосов
/ 30 декабря 2010

Ваша HTML-разметка имеет пробел между тегами a.Поэтому он отображается в виде 5 блоков шириной 20% и 4 пробелов размером примерно 4 пикселя каждый.Таким образом, вы получите 100% + 16px.

Edit

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

<!--[if IE]>
<style type="text/css"> .links { overflow: hidden; } </style>
<![endif]-->
2 голосов
/ 30 декабря 2010

Попробуйте положить их в контейнер.Вот так: 

#container {
    margin: 0;
    padding: 0;
    width: 100%;
}

#boxes {
    float: left;
    width: 20%;
}
1 голос
/ 30 декабря 2010

Убедитесь, что ваше тело и html установлены на margin: 0; padding: 0;.

0 голосов
/ 30 декабря 2010

Вы хотите отпустить свои якоря.Делать это таким образом работает для меня .

CSS: 

.links {
    width: 100%;
}

.links>a {
    float: left;   
    display: inline-block;
    width: 20%;
    padding: 0;
    margin: 0;
    color: #fff;
    background-color: #4C8331;
}

HTML: 

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

Вы можете получить полосу прокрутки или посмотреть некоторыеякорей, перенесенных на другую строку, если нет места для размещения их всех на странице (т. е. содержимое переполняет ширину).Я отмечу, что я видел, как IE ошибся и неправильно обернул, когда это не должно.Это похоже на проблему округления, и ее можно обойти.

0 голосов
/ 30 декабря 2010

Вы пробовали использовать переполнение: скрыто? Или, точнее, overflow-y: hidden?

...