按钮显示：内联不换行

Question

我希望我的按钮像 span 一样显示内联和断行

参见小提琴：https://jsfiddle.net/ojkvdyfL/

.container{
    width:400px;
}
.subcontainer{
    display: inline;
}
button{
  display: inline;
  all:unset;
}

<div class="container">
    <p>1st example with buttons</p>
    <div class="subcontainer">
        <button> This is a short text in buttons </button>
        <button>with a longer text next to it because we need it so it takes mutliple lines to illustrate this issue</button>
    </div>
    <p>2nd example with spans</p>
    <div class="subcontainer">
        <span>This is a short text in spans </span>
        <span>with a longer text next to it becaufdsse we need it so it takes mutliple lines to illustrate this issue</span>
    </div>
</div>

我不明白为什么按钮示例不像 span 那样工作...

内联规范说：“在正常流程中，如果有空间，下一个元素将在同一行上。”

知道为什么它不起作用吗？是否存在 CSS 解决方案？还是我必须使用 role="button" 的 span？

Answer 1

HTML5 规范不允许这样呈现按钮，按钮布局说

...如果“display”的计算值是外部显示类型为“inline”的值，则表现为“inline-block”。”

这样做是为了向后兼容按钮渲染被委托给 O/S 函数的时代。