显示内联块不适用

Question

我正在尝试在"产品详细信息"类中对齐前两个div。我删除了最后一个div 清除：两者;我为第一个带有"文本中心"类的div 提供了 150px 的宽度。我给出了显示：内联块和位置：相对于两个第一个div。我制作了第二个div 自动的宽度。

当我检查检查元素中的计算值时，第一个div 不接受 display：inline-block。它显示显示：块;并且两个div 未水平对齐。我以前也遇到过这种情况。

div.text-center {
display: inline-block;
position: relative;
}
div:nth-child(2) {
display: inline-block;
position: relative;
}

<div class="product-details">
<div class="text-center">...</div>
<div>...</div>
<div style="clear:both;"></div>
</div>

div.text-center 不采用内联块显示，而是在元素检查器中显示显示块

Answer 1

代码确实有效。我右键单击第二个...，然后单击检查元素。您可以在"元素"选项卡中看到，然后在"样式"选项卡中看到默认显示：块被显示：内联块覆盖。您使用的是什么浏览器？这是我在最新版本的Chrome上得到这个结果。

Answer 2

如上所述，代码应该可以工作。您可以尝试通过添加重要规则来强制它工作div.text-center {display: inline-block !important;}

Answer 3

我删除了浮点数并根据需要显示从块到内联块的更改。这是唯一的选择。此外，我还需要删除宽度自动并为两个div提供以%为单位的宽度以水平对齐它们。这就是我找到的解决方案。感谢您的回答。