0

メニューを考案中です。このメニューには、2 列に配置されたボタンが含まれている必要があります。各ボタンの幅は、使用可能な画面幅の 50% にする必要があります。

各ボタンを同じサイズにすることができました。しかし、ボタンに含まれる文字数に関係なく、各ボタンを画面幅の 50% にしたいと考えています。さらに、さまざまな画面解像度をサポートする必要があるため、相対的なサイズで作業する必要があります。

ここに私がこれまでに得たワットがあります： http://jsfiddle.net/PJ9cJ/

<div class="actions" id="actions">
        <div id="steuerung">
            <table class="actions_table" border="0" >
                <tr >
                    <td>
                            <a href="javascript:displaySomething();" class="action_button" >Button 1</a>
                    </td>
                    <td >
                            <a href="javascript:displaySomething();" class="action_button" >Button 2</a>
                    </td>
                </tr>
                <tr >
                    <td >
                            <a href="javascript:displaySomething();" class="action_button"  >Button 3</a>
                    </td>
                    <td >
                            <a href="javascript:displaySomething();" class="action_button" >Button 4</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

そして、ここで私の問題を見ることができます: ここに画像の説明を入力 私は助けに感謝します! ありがとうございました！

4

2 に答える 2

1

テーブルを要素の幅の 100% にし、親の div (アクション) を左に浮かせて 100% にしました。次に、action_button クラスの余白を少し調整しました。

.actions_table{
    width:100%;
    border-spacing:0;
}
#actions{
    width:100%;
    float:left;
}

.action_button {
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',       endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:50%;
    font-weight:bold;
    width: 100%;
    margin: 5%;
    margin-left:0;
    margin-right:0;
    padding:1em 0px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}

http://jsfiddle.net/PJ9cJ/11/

于 2013-03-12T01:56:25.840 に答える
0

あなたが苦しんでいる実際の問題は何ですか？<td>しかし、要素を列と同じサイズに揃えている場合は、そう言って欲しかった。最良の方法は、 for<td>要素を使用することです。この後に定義して、他の要素にdisplay: inline-block;調整できます。display: block;または、これがうまくいかない場合は、正確に欲しい写真を見せてください (コラムの写真のみ)。

于 2013-03-12T02:21:33.340 に答える