web-dev-qa-db-ja.com

ボタンを均等に伸ばしてコンテナ<div>を埋める方法（セルのあるテーブル行のように機能します）

コンテナ<div>にいくつかのボタンがあるとしましょう：

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
    <div style="clear:both"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

そしてこれにいくつかのCSSを割り当てました：

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
}
.button{
    background:#F00;
    float:left;
    height:inherit;
    line-height:inherit;
}

背景色は、自分が何をしているかがわかるようにするためのものです。すべてのボタンを<div>sを親<div>に（同じ幅で）引き伸ばすJavaScriptを使用しない方法があるかどうか疑問に思っています。また、親<div>を使用して自動的に幅を取得してほしいと思います。つまり、4つあるので.button幅を25％に設定することもできますが、ボタンをさらに追加した場合は、自動的に新しい幅を取得する必要があります。

私は自分自身を十分に説明したことを願っています、私は周りを見回しましたが、これに合うものを見つけることができませんでした。これをCSSで実行できますか、それともJSジョブですか？

JSFiddleはこちら

ありがとう。

htmlcssbuttonfluid-layout
6
George

display: table;およびdisplay: table-cell;で実行できます

テーブルに付随する悪い意味合いは知っていますが、テーブルマークアップを使用しておらず、divのactをテーブルのように作成しているだけです。

デモを見る ここ

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
</div>​

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
    display: table;
}
.button{
    background:#F00;
    display: table-cell;
}
​
23
Andy

これはCSSの完璧なユースケースです フレキシブルボックスモデル 。

HTML5 Rocks これについての素晴らしい紹介があります。

これにはベンダープレフィックスが必要であり、古いブラウザではサポートされていません。 Flexie があります。これは古いブラウザ用のポリフィルです。

2
Alessandro Vendruscolo

HTMLボタンが少し奇妙であることがわかりました。たとえば、「text-align：center」はdiv内のボタンの位置を変更しますが、「margin：auto」は変更しません。また、ボタンのサイズを変更すると、スタイルが異なります（Chromeの場合）。

別の解決策は、クリック可能なdivを作成することです。この方法で、ボタンのスタイルを設定して、クロスブラウザーの外観を確認することもできます。 （HTML5）

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

参照： https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

0
Paul