显示内联块不适用

Question

我正在尝试将“product-details”类中的前两个div对齐。我清楚地删除了最后一个div：两个;我给第一个div提供了150px的宽度，类为“text-center”。我给出了显示：内联块和位置：相对于两个第一个div。我做了第二个div auto的宽度。

当我检查inspect元素中的计算值时，第一个div不接受display：inline-block。它显示display：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

代码确实有效。我右键单击第二个...并单击了inspect元素。你可以在＆＃34; Elements＆＃34;选项卡然后在＆＃34;样式＆＃34;选项卡，默认显示：块被display：inline-block覆盖。你使用的是什么浏览器？这是Chrome的最新版本，我得到了这个结果。

Answer 2

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

Answer 3

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