使用css的React JS按钮彼此顶部对齐，而不是水平对齐

Question

我正在开发React JS应用程序。我有两个按钮，我希望它们的宽度相等。最初，它们是相邻对齐的。当我使用on sm-8增加按钮大小时，按钮呈现在彼此的顶部。当我点击F12时，我检查到按钮旁边没有边距或填充，我搞不懂为什么当宽度增加时，按钮会被强制在彼此的顶部对齐。有足够的空间。

我尝试了一些样式更改，比如justify-items: center，aligned-items: center，但到目前为止都不起作用。

以下是我的代码

<div className={'my-toolbar'}>
 <div className={''my-btn-group}
   <button className={'col-sm-8'}>{'AAAAAAAA'}</button>
   <button className={'col-sm-8'}>{'BBBBBBBB'}</button>
 </div>
</div>

css

.my-toolbar {
 display: flex;
 aligned-items: center;
 font-size; 16px
}

.my-btn-group {
 display: inline-block
 white-space: nowrap
}

Answer 1

您在CSS display: inline-block和display: flex中混合了两种类型的显示。

只关注flex，试试这个

.my-toolbar {
 display: flex;
 align-items: center;
 font-size; 16px
 }

 .my-btn-group {
 flex: 1
 }

Answer 2

试试这个：

.my-btn-group{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}

并删除显示:内联块和空格...