如何放置 div 标签以将所有按钮放在一行上？答案

【问题标题】：How to put div tag to put all buttons on one line?如何放置 div 标签以将所有按钮放在一行上？
【发布时间】：2023-03-27 11:32:01
【问题描述】：

过滤按钮代码

import React from "react";

function FilterButton(props){
    return (   
        <div className="box">    
        <button 
            type = "submit"
            className="button is-info"
            onClick={()=>props.setFilter(props.name)}
        >
            <span>{props.name}</span>   
        </button>
        </div>
    );
}

export default FilterButton;

很遗憾，div 标签无法放置以下按钮（全部、活动、已完成、重要）在同一行。

这个问题有解决办法吗？

【问题讨论】：

有很多方法可以做到这一点。你想使用纯 CSS，还是在项目中使用框架，例如 Bootstrap？
@TheTisiboth，我在我的项目中使用 BULMA 框架。感谢您对我的项目的关注和帮助。
你可能需要在css中替换className="box"或者编辑.box。

标签： css reactjs bulma

【解决方案1】：

如果你想使用 BULMA 的网格系统，你可以做以下事情：见https://bulma.io/documentation/columns/basics/:

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

如果你想使用 css 来做到这一点，你可以使用 css 属性display: inline-block，如下所示： https://www.w3schools.com/css/css_inline-block.asp

【讨论】：