3

次の HTML グループがあります。

<div id="item-groups">
<!-- Section to select product types -->

<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Beverage</h3>
</div>
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Tobacco</h3>
</div>
</div>

上記の要素用に次の CSS を設計しました。

#item-groups{
height: 75px;

}

.item-group-button{
    width:130px;
    height:40px;
    float:left;
    margin:17px 0px 0px 20px;
    border-radius:10px;
    background:#4e5154;
}

.item-group-button h3{
    padding:0px;
    margin:8px 0px 0px 29px;
    color:white;
}

item-groups div がフレームとして機能するように CSS を設計するにはどうすればよいですか? 少し説明すると、item-group-buttons は DB からロードされ、要素の量は DB レコードの数に依存します。要素が特定の制限を超えると、超過した要素は順不同になります。どうすればこれを止めることができますか? 他の要素の位置を絶対的にすると、必要な要素がフレームとして機能する方法を試しました。しかし、私の場合、それは不可能です。

item-groups 要素の幅制限を外してみましたがダメ！

アップデート：

少ないボタンで

より多くのボタンで

ご覧のとおり、最初の画像は正しく表示されていますが、2 番目の画像では、ボタンが増えると他の要素の順序が乱れることがわかります。どうすればこれを修正できますか。ボタンを 2 行目に移動するのではなく、1 行に固定する必要があります。

HTML フレームを使用している場合、表示する要素がさらにある場合は、スクロール バーが表示されます。その機能を Div で使用するにはどうすればよいですか。

4

2 に答える 2

1

これは、次のコードを使用して実行できる単純な CSS トリックです。

親要素の場合:

#item-groups{
height: 80px;
width: inherit;
overflow-x: scroll; <-- Make the scrolling horizontal
white-space: nowrap; <-- Handle the white space in the element 
}

子要素の場合:

.item-group-button{
width: 130px;
height: 40px;
margin: 17px 0px 0px 20px;
border-radius: 10px;
background: #4e5154;
    display: inline-block; <-- this will display the excess elements in a line
}

子要素からフロートを削除する必要があります。

皆さん、ご尽力いただきありがとうございます。

于 2013-04-18T05:38:56.140 に答える
0

スクロール バーを取得するoverflow-x: scroll;には、コンテナーで を使用します。これにより、内部の要素が境界を超えて拡張できるようになり、それが発生したときにスクロール バーが作成されます。

メニューの場合、これは最良の選択肢ではない可能性があることを指摘したいと思います。スクロール バーがデザインとうまくかみ合わないだけです。2 つの選択肢があります。

  1. コンテナに収まらない場合は、ボタンのサイズを変更します。基本的に、プロパティを定義max-width:してパーセンテージを指定すると、width:オーバーフローが発生するまですべてのボタンが正常に表示されます。明らかに、これはラベル付けの問題である可能性があります。overflow-x: hidden;ラベルのテキストを正しく表示するには、ラベルのテキストを変更する必要がある場合があります。または試してみてください。. .

  2. 独自のスクロールを作成します。少しの JavaScript に慣れている場合は、コンテナーでoverflow-x: hidden;とを使用しposition: relative;て、その中にボタンを保持する「スライダー」を配置し、position: absolute;. 次に、コンテナーの両端にホバー ボタンを配置し、JS をトリガーしてスライダーの位置を調整し、スクロールします。これは、JS が有効になっている場合にのみ機能しますが、overflow-x: scroll;そのような場合は単純にメソッドにフォールバックできます。ここでの利点は、すべてが美しく均一に見えることです。

OS/ブラウザーごとにレンダリングが大きく異なるため、私は通常、スクロール バーを強制的に表示しないようにしています。CSS3 はスクロール バーを処理するための多数の疑似要素を提供するため、スクロール バーのスタイルを設定できるようになりました。残念ながら、ブラウザのサポートは大ざっぱで、特別なブラウザ固有のコードが必要です。つまり、これはあまり良い選択肢ではありません。

于 2013-04-18T07:04:53.190 に答える