1

左矢印ボタン、画像ボタンのセット、右矢印ボタンで構成されるツールバーを作成する必要があります

私の要件は次のとおりです。

  • ツールバーは 1 行に配置する必要があります

  • ツールバーは水平方向の中央に配置する必要があります

  • セットには多くの画像ボタンを含めることができます (N は不明)

  • ウィンドウの幅が小さすぎる場合、中央の div は収まらない画像ボタンを非表示にする必要があります

すべてを水平方向に中央に配置するには、これがクロムでうまく機能することがわかりました:

<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>

しかし、残念なことに、ボックス パラメータは、中間セットが大きくなりすぎてすべてに収まらない場合に必要な、overflow:hidden スタイルを壊します。

すべてを水平方向にセンタリングする別の方法はありますか?

4

5 に答える 5

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 に答える
0

はoverflow:hidden、幅と高さを設定した場合にのみ機能します。

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

JSFiddle を表示する

于 2013-08-09T17:47:04.753 に答える
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

上記の回答は条件を満たしていません

ウィンドウの幅が小さすぎる場合、中央の 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

これを行うにはいくつかの方法がありますが、何が最適かはわかりません。

まず、ボタンを含む 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 に答える