button { display: inline-block; margin: 0 10px 10px 0; / 右边和下边的外边距 /}2. 利用display: flex;

将 div 容器设置为 display: flex;，子 button 元素将在同一行内排列。
如果须要它们自动换行，可以将 flex-wrap 属性设置为 wrap。

.div-container { display: flex; flex-wrap: wrap;}button { margin: 0 10px 10px 0; / 右边和下边的外边距 /}3. 利用display: grid;

将 div 容器设置为 display: grid;，可以创建一个网格布局，个中 button 元素可以分布在多行。

.div-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; / 网格项之间的间隙 /}button { / 如果须要，可以设置宽度 /}4. 利用float属性

虽然这不是相应式布局的首选方法，但你可以为 button 元素设置 float: left;，使它们在同一行内排列。

htmldiv换行显示把 div 下面的按钮排成一行一行的 Java

button { float: left; margin: 0 10px 10px 0; / 右边和下边的外边距 /}

记得在 div 容器后利用 clear: both; 打消浮动，以防止布局问题。

HTML构造

在所有情形下，你的HTML构造将类似于：

<div class="div-container"> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> <!-- 更多按钮... --></div>

哎呀，你要看详细情形啦！
要看你是不是须要自动换行，按钮宽度是不是固定的，还有你需不须要更繁芜的布局掌握。
一样平常来说，flex 和 grid 这两个选项比较当代和强大哦。