为什么两个行内块元素无法在同一行分别左右对齐显示？

问题根源 #

你代码的问题主要来自两点：

1. 盒模型计算偏差：你给两个子元素设置的是width:48%+左右各padding:1%，默认盒模型（content-box）下padding是额外叠加在宽度上的，单个元素实际占用宽度是48% + 1% + 1% = 50%，两个元素总宽度刚好是100%。
2. inline-block默认空白间隙：HTML里两个inline-block元素之间的换行/空格会被渲染成大概4px的空白间距，这部分额外宽度导致两个元素总宽度超过父容器100%，所以第二个元素就会换行。

解决方法 #

方案1：消除inline-block空白（改动最小）

直接把两个子元素的HTML代码连写，去掉中间的换行和空格，同时添加box-sizing: border-box确保padding被计算在设置的宽度内：

<div id="divBotoneraMapaGestiones" style="text-align: left;width: 100%;display: block;" class="singular_botone">
    <div class="singular_h1" style="display: inline-block;width: 48%;padding: 1%;box-sizing: border-box;">Bienvenido a <span class="singular_textorojo">TPV Santander</span></div><a href="#" id="200TPVMapaGestiones" class="singular_button w-button" style="display: inline-block;width: 48%;padding: 1%;box-sizing: border-box;text-align: right;">Consulta el mapa de <br><span class="singular_textobotonpeque">gestiones</span></a>
    <div class="clear" style="clear: both;"></div>
</div>

方案2：使用Flex布局（更推荐，适配性更强）

直接修改父容器样式，无需手动计算宽度也不会有间隙问题，还能自动实现垂直对齐：

<div id="divBotoneraMapaGestiones" style="width: 100%;display: flex;justify-content: space-between;align-items: center;" class="singular_botone">
    <div class="singular_h1" style="padding: 1%;">Bienvenido a <span class="singular_textorojo">TPV Santander</span></div>
    <a href="#" id="200TPVMapaGestiones" class="singular_button w-button" style="padding: 1%;">Consulta el mapa de <br><span class="singular_textobotonpeque">gestiones</span></a>
</div>

justify-content: space-between会自动把文本靠左、按钮靠右排列，align-items: center可以让两个元素垂直居中对齐，不需要额外加清除浮动的元素。

方案3：通过font-size消除间隙

给父容器设置font-size:0隐藏空白节点的宽度，再单独给子元素设置需要的字体大小即可：

<div id="divBotoneraMapaGestiones" style="text-align: left;width: 100%;display: block;font-size:0;" class="singular_botone">
    <div class="singular_h1" style="display: inline-block;width: 48%;padding: 1%;box-sizing: border-box;font-size:16px;">Bienvenido a <span class="singular_textorojo">TPV Santander</span></div>
    <a href="#" id="200TPVMapaGestiones" class="singular_button w-button" style="display: inline-block;width: 48%;padding: 1%;box-sizing: border-box;font-size:16px;text-align:right;">Consulta el mapa de <br><span class="singular_textobotonpeque">gestiones</span></a>
    <div class="clear" style="clear: both;"></div>
</div>

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