2

HTML で [OK] ボタンと [キャンセル] ボタンを作成する必要があり、2 つのボタンが同じサイズになるように幅を固定したいと考えています。たとえば、次のようにします。

<style>
button.ok_cancel {
    width: 50px;
    background-color: #4274af;
    font-size: 9px;
    line-height: 12px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    padding: 1px;
    border: 0px;
    margin: 0 0 0 5px;
    text-align: center;
    letter-spacing: 1px;
}
</style>

<button class="ok_cancel" onclick="do_cancel()">Cancel</button>

しかし今、私はテキストをローカライズしていて、「キャンセル」の翻訳はボタンに対して広すぎる可能性があります. 文字列が収まる場合はボタンを 50 ピクセルの固定幅にしますが、文字列がより広い場合は幅を広げます。ボタンの見栄えを良くするために、一定量のサイド パディングが使用されます。

純粋な CSS ではおそらくこれを行うことができないことはわかっていますが、私が望む効果を得るために使用できる最も単純な HTML は何ですか?

4

2 に答える 2

3

私はtwodayslateの答えから働き、これで終わりました：

/* Browser hack! This is for everyone: */
button {
    display: inline;
    cursor: pointer;
    padding: 6px 6px;
    width: 50px;
    overflow: visible;
}
/* and this is for non-IE browsers: */
html>body button {
    min-width: 50px;
    width: auto;
}

IE は指定された幅とオーバーフローの可視性を必要とし、他のブラウザーは最小幅と幅自動を必要とします。CSS ハックにより、IE が 1 つのプロパティ セットを認識し、他のブラウザが別のセットを認識できるようになります。

于 2008-12-10T01:20:12.490 に答える
0

よくわかりませんが：

ボタン { 最小幅: 50px; 幅: 自動; }

LMK これが機能する場合は、フローティングされていない限り機能するはずです。

于 2008-12-09T02:15:53.050 に答える