3
コマンド・バーのスタイルを設定しようとしています。それはIE9で動作するはずですので、flexboxは外です。代わりに、display:tableレイアウトを使用しています。display：ボタン・セルで表のセルが機能しない
最初のスニペット（<span>を使用）は、どのように見たいのですか。 2番目のスニペットは適切なHTMLであり、正しくスタイルされていません。要素が正しく配置されていないため、2番目のボタンが1行下に押し込まれ、枠線が崩れません。
ボタンをラップすることなくこれを修正する方法はありますか？私がそれをした場合、私はラッパーにボーダーを置くために多くのスタイルを元に戻してやり直さなければならないでしょう。それ以外の場合は、<button>を<span role="button" tabindex="0">と置き換えることができます。
html {
font-size: 24px;
line-height: 1rem;
}
* {
font: 18px Calibri;
box-sizing: border-box;
}
.controls {
margin: 1rem;
height: 1rem;
width: 800px;
border: 1px solid #c77;
background-color: #eee;
display: table;
border-collapse: collapse;
}
.controls > * {
display: table-cell;
white-space: nowrap;
}
.spacer {
width: 99%;
}
button,
span {
height: 1rem;
border: 1px solid #7c7;
padding: 0 0.5rem;
background: #f7f7f7;
}<div class="controls">
<div>Title</div>
<div class="spacer"></div>
<span>Button A</span>
<span>Button B</span>
</div>
<div class="controls">
<div>Title</div>
<div class="spacer"></div>
<button type="button">Button A</button>
<button type="button">Button B</button>
</div>