У меня есть шаблон с областью содержимого, в которую я хочу добавить центрированный блок навигации.
Блок навигации должен выглядеть следующим образом:
|----|-------------------|----|
| << | 1 2 3 4 5 6 7 8 9 | >> |
|----|-------------------|----|
Есть 3 блока: правый и левый - это div, содержащие элемент «a» с отображением: блок, фиксированная ширина / высота и фоновое изображение.
Средний блок содержит переменное количество ссылок (что означает, что я не могу установить ширину), каждая из которых имеет display: block и границу вокруг них, все плавающие влево, как 3 блока верхнего уровня.
Теперь это мой соответствующий код:
div#pagination {
margin: 0 auto;
display: table;
overflow: hidden;
}
.goleft { float: left; }
a.prev-btn, a.next-btn {
width: 30px;
height: 26px;
display: block;
}
div.pagination {
height: 25px;
overflow: hidden;
padding: 4px, 10px 0 5px;
background-color: #141414;
}
div.pagination a {
float: left;
padding: 2px;
color: #fefffe;
text-align: center;
border: 1px solid #51ae1b;
display: block;
margin-left: 8px;
}
<div id="content">
<div id="pagination">
<a href="#" class="prev-btn goleft"></a>
<div class="pagination goleft">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<a href="#" class="prev-btn goleft"></a>
</div>
</div>
Проблема с этим кодом в том, что он не совсем работает в Firefox, а в Opera работает еще хуже.
В опере с достаточным количеством ссылок в среднем div, левый и правый div всегда выше и ниже среднего div, соответственно.
На FFox правый div, кажется, остается на месте или опускается ниже двух других div, но не всегда.
В обоих случаях средний div длиннее, чем элементы внутри, и я действительно не могу понять, почему он это делает - если я установил ширину, то все в порядке, но это действительно невозможно.
Что я делаю не так?