Question

我有一个内容区域的模板，我想在其中添加一个居中的导航块。导航块应该如下所示：

|----|-------------------|----|
| << | 1 2 3 4 5 6 7 8 9 | >> |
|----|-------------------|----|

有3个块：右边和最左边的块是包含“a”元素的div，显示：块，固定宽度/高度和背景图像。
中间块包含可变数量的链接（这意味着我无法设置宽度），每个都有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似乎保持原位或低于其他2个div，但不一致在两者上，中间div比其中的元素长，我真的不明白为什么会这样做 - 如果我设置宽度一切都很好，但实际上是不可能的。
我做错了什么？

Answer 1

如果无法设置宽度，请尝试使用“收缩包裹”方法。

以下是其他帖子的更多信息：centering a div without setting width

动态宽度浮动div与嵌套浮动块

1 个答案: