1

我需要做一个由左箭头按钮、一组图像按钮和右箭头按钮组成的工具栏

我的要求是：

  • 工具栏需要在一行

  • 工具栏需要水平居中

  • 该集合可以有许多图像按钮（N 未知）

  • 当窗口宽度太小时，中间 div 应该隐藏不适合的图像按钮

为了使所有内容水平居中，我发现这在 chrome 上运行良好：

<div style="display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;" class="toolbar">
    <button>LEFT</button>
    <div style="overflow:hidden;">
        <button style="height:72px">1</button>        
        <button style="height:72px">2</button>        
        <button style="height:72px">3</button>
        <button style="height:72px">4</button>        
        <button style="height:72px">5</button>
        <button style="height:72px">6</button>        
        <button style="height:72px">7</button>        
        <button style="height:72px">8</button>
        <button style="height:72px">9</button>
    </div>
    <button>RIGHT</button>
</div>

但不幸的是，盒子参数打破了溢出：隐藏样式，如果中间集变得太大而无法容纳所有东西，这是必要的。

那么还有另一种水平居中的方法吗？

4

5 回答 5

0

以上答案不符合条件

当窗口宽度太小时，中间 div 应该隐藏不适合的图像按钮

overflow:hidden requires size
<div style="overflow:hidden; width:10%; max-width:10%; white-space:nowrap;
            max-height:72px; height:72px">

http://jsfiddle.net/VzyRm/

于 2013-08-09T17:43:33.037 回答
0

只要元素不浮动，就可以使用 text-align: center 和 display: inline 块。

<div style="text-align:center;" class="toolbar">
    <button style="display: inline-block;">LEFT</button>
    <div style="overflow:hidden; display:inline-block;">
        <button style="height:72px">1</button>        
        <button style="height:72px">2</button>        
        <button style="height:72px">3</button>
        <button style="height:72px">4</button>        
        <button style="height:72px">5</button>
        <button style="height:72px">6</button>        
        <button style="height:72px">7</button>        
        <button style="height:72px">8</button>
        <button style="height:72px">9</button>
    </div>
    <button style="display: inline-block;">RIGHT</button>
</div>

检查这个JSFiddle

于 2013-08-09T17:36:34.093 回答
0

只有当overflow:hidden你给它一个设定的宽度和高度时，它才会起作用。

<div style="overflow:hidden; width:213px; height:73px;">

查看JSFiddle

于 2013-08-09T17:47:04.753 回答
0

有几种方法可以做到这一点，我不确定哪种方法最适合您。

首先确保设置包含按钮的 div 元素的宽度。否则它将默认为 100% 并且 margin:0 auto 将不起作用；

像这样的东西

<style>
.horizantalAlign{
width:900px;
margin:0 auto;
}
</style>
<div class="horizantalAlign">
    <button style="height:72px">1</button>        
    <button style="height:72px">2</button>        
    <button style="height:72px">3</button>
    <button style="height:72px">4</button>        
    <button style="height:72px">5</button>
    <button style="height:72px">6</button>        
    <button style="height:72px">7</button>        
    <button style="height:72px">8</button>
    <button style="height:72px">9</button>
</div>
于 2013-08-09T17:37:03.563 回答
0

“margin: 0 auto”启发了我寻找解决方案。谢谢

我使用的是表格而不是 div，然后它运行良好

http://jsfiddle.net/G3Vu6/4/

<div style="" class="toolbar">
<table style="margin: 0 auto; max-width: 100%">
    <tr>
        <td style=""><button>LEFT</button></td>
        <td style="" >
            <div style="overflow:hidden;max-height:72px">
                <button style="height:72px">1</button>        
                <button style="height:72px">2</button>        
                <button style="height:72px">3</button>
                <button style="height:72px">4</button>        
                <button style="height:72px">5</button>
                <button style="height:72px">6</button>        
                <button style="height:72px">7</button>        
                <button style="height:72px">8</button>
                <button style="height:72px">9</button>
                <button style="height:72px">1</button>        
                <button style="height:72px">2</button>        
                <button style="height:72px">3</button>
                <button style="height:72px">4</button>        
                <button style="height:72px">5</button>
                <button style="height:72px">6</button>        
                <button style="height:72px">7</button>        
                <button style="height:72px">8</button>
                <button style="height:72px">9</button>
                <button style="height:72px">1</button>        
                <button style="height:72px">2</button>        
                <button style="height:72px">3</button>
                <button style="height:72px">4</button>        
                <button style="height:72px">5</button>
                <button style="height:72px">6</button>        
                <button style="height:72px">7</button>        
                <button style="height:72px">8</button>
                <button style="height:72px">9</button>
            </div>
        </td>
        <td><button style="">RIGHT</button></td>
    </tr>
</table>

尝试在 fiddler 中使用分离器，您会看到它的反应如何。

于 2013-08-09T21:02:40.760 回答