14

そのため、display: table-cell2つのボタンを並べて配置し、一方のテキストが次の行にオーバーフローした場合に、両方のボタンの高さが同じになるように使用しています。私はそれらの間にスペースを置くために持っていてborder-collapse: separate、使っています。border-spacingのようなものを使用している場合は問題なく動作しますが、要素<div class="button">を使用するとすぐに<button>中央のスペースが消えます。
JSFiddle：http

://jsfiddle.net/uASbb/ さて、<div>今のところ（意味的に正確ではないにしても）を使用するのは問題ないので、ここで何が起こっているのかを誰かが正確に知っているかどうか、私はほとんど興味があります。 注：この同じ状況で要素
を使用すると、いくつかの（異なる）奇妙な動作にも気づきました：http： //jsfiddle.net/G5SFX/1/ Is<input>

display: table-cellこれらのインスタンスではサポートされていませんか？これはバグですか？

ありがとう！

display: table-cell編集：ボタンにを適用できないようです。デフォルトでは。に戻りinline-blockます。Chrome WebInspectorのこのスクリーンショットを参照してください：
テーブルセル->インラインブロック

質問が残っています：これは意図的なものですか？それは仕様ですか、それとも単なるブラウザですか？変更してもらえますか？

4

1 に答える 1

2

button要素を a に挿入することは良い解決策です (あなたの場所でもそれを選択するでしょう) が、 a の助けなしに両方の要素を並べdivて表示したい場合は、 a の助けを借りずにクラスでこれを試すことができます:buttondiv.item

.item {
    display: table-cell;
    width: 46%;
    background: aliceBlue;
    border: 1px solid black;
    margin: 1%;
}

Widthすべての要素の周りにof46%を許可するように縮小されます。それらの間にスペースができました。また、ウィンドウのサイズを変更すると、2 番目の要素が最初の要素の下に収まりません。margin1%buttonbutton

例: http://jsfiddle.net/codenighter/H7TZU/

それが役に立てば幸い。

編集: border-spacing(実際にはスタイリングのどれもblock機能していません) はbuttonorでは機能しないようinputです。spanただし、 、h1またはなどの他のインライン要素と連携しbます。そのため、forinputとプロパティを適切に適用できません (and の値を変更しましたが、表示されましたが、forとは実際には 50%のままでした)。buttondisplay: table-cellwidthbuttoninputspanbwidth

例: http://jsfiddle.net/codenighter/HrTZS/

于 2012-09-26T08:10:32.893 に答える