网页按钮及Flex容器元素意外呈inline显示问题求助

按钮默认是inline-block元素，所以会默认横向排列；如果用Flexbox容器但没显式设置flex-direction: column，默认的row方向也会让元素横向排布，这就是你遇到的问题。<br>标签能临时解决，但属于非语义化的hack方式，推荐用CSS布局来规范排列：

方案1：Flexbox垂直排列（推荐） #

给按钮的父容器添加Flex布局并设置垂直方向，还能通过gap控制按钮间距：

<h1 id="id1">My Heading 1</h1>
<p id="demo"></p>
<!-- 给按钮加父容器，设置Flex布局 -->
<div style="display: flex; flex-direction: column; gap: 10px;">
  <button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button>
  <button onclick="displayDate()">Try it</button>
</div>

方案2：修改按钮为块级元素 #

直接将按钮设置为block，让每个按钮独占一行，用margin-bottom控制间距：

<h1 id="id1">My Heading 1</h1>
<p id="demo"></p>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'" style="display: block; margin-bottom: 10px;">Click Me!</button>
<button onclick="displayDate()" style="display: block;">Try it</button>

补充说明 #

Flex容器默认的flex-direction值是row，所以元素会沿水平方向排列，只要显式设置为column就能改成垂直排列——你混淆了inline-flex（让容器本身成为行内元素）和子元素排列方向的关系，二者没有直接关联。

内容的提问来源于stack exchange，提问作者marmarmar