如何使用CSS让UI按钮中的文本内容适配显示

算力阿峰

2026-8-22

从你提供的UI图来看，两个按钮目前是上下堆叠的状态，你想要让它们横向并排，但添加display: inline-block后没达到预期效果。

问题原因

你当前给按钮设置了width: 65% !important，两个这样的按钮宽度加起来远超容器的100%宽度，就算设置了inline-block，浏览器也会因为空间不足自动让按钮换行。

解决方案

方案1：调整按钮宽度+inline-block

修改按钮的宽度，给两个按钮留出足够的间距，比如把宽度改成48%，同时确保display: inline-block生效：

background-color: #24a5cf !important;
color: black !important;
font-size: large !important;
border-radius: 20px !important;
font-weight: bold !important;
border-color: #24a5cf !important;
width: 48% !important; /* 修改宽度，留出间距空间 */
border-style: none !important;
height: 46px !important;
display: inline-block !important; /* 加!important确保样式优先级 */
margin-right: 2%; /* 控制按钮间的间距 */

注：如果是最后一个按钮，可以单独移除margin-right，避免容器右侧多出空白。

方案2：使用Flex布局（更推荐）

给按钮的父容器添加Flex布局，这种方式无需手动计算宽度，更灵活易维护：

父容器CSS：

.button-container {
  display: flex;
  gap: 10px; /* 直接设置按钮间的间距 */
  padding: 0 10px; /* 可选，给容器加左右内边距优化视觉 */
}

按钮CSS调整：

background-color: #24a5cf !important;
color: black !important;
font-size: large !important;
border-radius: 20px !important;
font-weight: bold !important;
border-color: #24a5cf !important;
flex: 1 !important; /* 替换width，让按钮自动平分容器空间 */
border-style: none !important;
height: 46px !important;