我想让我的按钮像跨度一样在里面显示内联和折 break line
参见小提琴: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"的跨度？