1. ホーム
  2. 質問と答え
  3. 正確なサイズを指定せずにボタンを同じ幅にしますか？

正確なサイズを指定せずにボタンを同じ幅にしますか？

2012-11-20 14 views
11

私は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％の幅を必要とすることを把握せずにこれを行うことができます方法はありますか？私は実行時にボタンを削除したいと思います。つまり、残りの各ボタンを再度width = 25％に更新する必要があります。

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

おかげ

出典

2012-11-20 user291701

答えて

11

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

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

彼らはあなたのコードを見れば、それは実際に任意の代替よりも、おそらくより良い問題を解決しても（これは、これらの日、同僚の間であなたの評判を改善しません。このようなCSS機能をサポートしていない古いブラウザでは失敗します。）

出典

2012-11-20 23:10:57

+0

なぜこのような人はいないのですか？それは単なるファッションなのでしょうか？ – Superbest

+1

@Superbest -

は表のデータにのみ使用する必要がある「意味要素」であるため、レイアウト用の表を使用すると戸惑うことになります。セマンティック要素に違反すると、Webクローラーとスクリーンリーダーの両方に課題が発生しますが、
と
要素がないなど、レイアウト用に表が使用されているかどうかを判断するためのトリックがあります。 –

+1

のこの使用を構造テーブルを使用するものとして分類できなかった理由はまったくありません。 （「意味要素」はアイドルなバブルです。
要素は、セマンティクスについては意味がありません。構造やレイアウト、またはその両方に関するものです）実際の生活で実際に発生する問題を指摘できない限り、
要素をこのように使うと、私は答えに予想される意味論的な批判の理由がないと思います。 –

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を使用したい場合は、試してください：あなたは、より複雑なクエリをしたい場合.getElementsByTagName()を交換する必要があることが

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

注意、 。

出典

2012-11-20 22:35:04

0

私は、jQueryを使用すると、よりダイナミックなことができると思います。

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

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

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

  3. ボタンを何度も必要なだけ作成する機能を実行します。

出典

2012-11-20 22:40:44

3

これは、フロントエンドグリッドシステムからキューを取って、このような状況に取り組む方法です。クラスを使用してください！ボタンを削除すると、クラスを変更します。 Here's a fiddle。

あなたの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;}

とjQuery、あなたはおそらくどんなプロセスの一環として、このスクリプトを使用したいと思うけれどもボタンを削除します：

$('#remove_one').click(function(){ 
    $('#remove_this').remove(); 
    $('button').each(function(){ 
     $(this).removeClass('fiveup').addClass('fourup'); 
    }); 
});​

出典

2012-11-20 22:44:33 crowjonah

+1

はほとんど同じことを投稿するちょうど約^^ 1 – Tom

+0

私は本当にこのアプローチを嫌いだった、それは非常に剛性のです。 'n'ボタンがあればどうしますか？次のクラス名を決定するロジックはどこにありますか？そして、このようなことをしない理由があります： '.red {color：red; } '。 – Madbreaks

+0

質問に記載されている2つのシナリオは、nケースのシナリオとは大きく異なり、無数の人々が人気のある[Foundation Framework]（http://foundation.zurb.com/docs/grid。 php）、それには正当な理由があるはずです。 – crowjonah

2

私はこれが古いと知っていますが、他の誰かがまだ別のものを探しているメソッド、これは私のお気に入りのメソッドです：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-07 09:26:29 Fasmir

関連する問題

 関連する問題