要使 div 下的 button 元素一行一行排列，你可以使用各种CSS布局技术。以下是几种常见的方法：

1. 使用display:inline-block;

将每个 button 元素设置为 display: inline-block;，它们将在 div 容器内水平排列，直到没有足够的空间，然后自动换行。

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;，使它们在同一行内排列。

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 布局挺现代化和强大的选项哦。