问题描述 #

按钮内的文本无法保持单行显示，按钮两侧有足够留白空间，尝试以下CSS代码未生效：

#loquiero {
  padding: 10px 70px 10px 70px; 
}

#loquiero {
  text-align: center !important;
  margin: auto;
}

#loquiero {
  white-space: nowrap;
  display: inline-block !important;
}

问题分析 #

重复声明三次#loquiero选择器容易导致样式优先级混乱，另外可能存在父元素宽度限制、全局样式干扰等情况，导致核心的单行文本设置未生效。

修复方案 #

合并样式声明，优化核心属性，确保文本单行显示及留白效果：

#loquiero {
  /* 统一设置两侧留白的内边距 */
  padding: 10px 70px;
  /* 文本水平居中 */
  text-align: center;
  /* 按钮自身水平居中 */
  margin: 0 auto;
  /* 强制文本保持单行 */
  white-space: nowrap;
  /* 保持行内块级显示，适配内边距 */
  display: inline-block;
  /* 可选：防止文本溢出时显示省略号（按需启用） */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：设置最小宽度，避免按钮被父元素压缩 */
  min-width: 220px;
}

关键提示 #

• 移除不必要的!important，通过合并选择器提升样式优先级，避免与全局样式冲突
• 如果父元素存在固定宽度限制，需调整父元素宽度或给按钮设置min-width，保证文本有足够单行显示空间
• white-space: nowrap是强制单行的核心属性，需确保没有被其他更高优先级样式覆盖

内容的提问来源于stack exchange，提问作者Karoli