14

私は5つのボタンを持っています。親 div の利用可能な幅を占有し、それぞれが同じサイズになるようにします。

<div style="width: 100%; background-color: red;">
    <button type="button" style="width: 20%;">A</button>
    <button type="button" style="width: 20%;">B</button>
    <button type="button" style="width: 20%;">C</button>
    <button type="button" style="width: 20%;">D</button>
    <button type="button" style="width: 20%;">E</button>
</div>

それぞれに 20% の幅が必要であることを手動で把握することなく、これを行う方法はありますか? 実行時にボタンを削除したいということは、残りの各ボタンを再度幅 = 25% に更新する必要があることを意味します。

より自動化された方法があるかどうかを確認しているだけです。

4

6 に答える 6

16

最も簡単で堅牢な方法は、テーブルを使用することです。

<style>
.buttons { 
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: red; 
}
.buttons button { 
  width: 100%;
}
</style>
<table class=buttons>
 <tr>
    <td><button type="button">A</button>
    <td><button type="button">B</button>
    <td><button type="button">C</button>
    <td><button type="button">D</button>
    <td><button type="button">E</button>
</table>

(これは、同僚があなたのコードを見たとしても、最近の同僚の間であなたの評判を改善することはありませんが、実際にはおそらくどの代替手段よりも問題を解決するでしょdivうdisplay: table.そのような CSS 機能はサポートしていません。)

于 2012-11-20T23:10:57.580 に答える
13

これは私のお気に入りの方法です ( Flexbox )! -

<div style="width: 100%; background-color: red;">
    <button type="button">A</button>
    <button type="button">B</button>
    <button type="button">C</button>
    <button type="button">D</button>
    <button type="button">E</button>
</div>

div {
  display: flex;
  justify-content: space-around;
}
button {
  width: 100%;
  margin: 5px; /* or whatever you like */
}

ボタンの数に関係なく、ボタンの幅が自動的にサイズ変更され、div.

作業ペン: http://codepen.io/anon/pen/YpPdLZ

于 2016-11-07T09:26:29.110 に答える
3

これは、フロントエンド グリッド システムからキューを取得して、このような状況に対処する方法です。クラスを使おう！ボタンを削除したら、クラスを変更します。ここにフィドルがあります。

HTML マークアップは次のように変更される可能性があります。

<div>
    <button type="button" class="fiveup">A</button>
    <button type="button" class="fiveup">B</button>
    <button type="button" class="fiveup">C</button>
    <button type="button" class="fiveup">D</button>
    <button type="button" class="fiveup" id="remove_this">E</button>
</div>
<button id="remove_one">Remove One</button>​

CSS は次のようになります。

.fiveup {width: 18%;margin:1%;float: left;}
.fourup {width: 23%;margin:1%;float: left;}

ボタンを削除するプロセスの一部として、このスクリプトを使用することをお勧めします。

$('#remove_one').click(function(){
    $('#remove_this').remove();
    $('button').each(function(){
        $(this).removeClass('fiveup').addClass('fourup');
    });
});​
于 2012-11-20T22:44:33.007 に答える
0

両親のサイズが同じであると仮定すると、問題に対する解決策が 2 つあります。

CSS:

button { /* You may want to limit the selector */
     width: 100%; /* Or any other percent */
}

JavaScript (jQuery):

$("button").width("100%");

ただし、正確な値を確実に取得するには、ピクセルに固執することをお勧めします。JavaScript を使用する場合は、計算された幅も使用できます。

編集

jQuery なしで JavaScript を使用したい場合は、以下を試してください。

var buttons = document.getElementsByTagName("button"),
    i = 0;
for (; i < buttons.length; i++) {
     buttons[i].width = "100%"; //Or any other value
}

ただし、.getElementsByTagName()より複雑なクエリが必要な場合は、これを置き換える必要があることに注意してください。

于 2012-11-20T22:35:04.987 に答える
-1

jQuery を使えば、もっと動的なことができると思います。

アルゴリズムのプロセスは次のようになります。

  1. div の幅を取得し、変数に入れます。

  2. 幅をボタンの数で割り、その答えを変数に入れます。

  3. 必要な回数だけその幅でボタンを作成する関数を実行します。

于 2012-11-20T22:40:44.920 に答える