Question

我使用WordPress 二十六主题。我创建了一个页面，现在我已经插入了4个图像。当我打开页面时，图像以垂直顺序显示，即1以上。他们也没有被分配 display：block 属性。我试过显示：内联和显示：内联块属性，但它们不起作用。这些清楚地显示在检查元素中，但它们不会影响元素。（另外， float：left 效果很好，但我希望显示：内联工作）。

问题是什么？如何解决？这是页面中写的文字：

<div id="gal-1">
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/surface.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/lumia.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/windows.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/edge.jpg" alt="" />
</div>

Answer 1

如果您使用它，它将起作用：

div#gal-1>img {
   display:inline;
}

当它是img时，这将匹配div gal-1孩子。如果需要，使用！important来覆盖任何显示：block;

Answer 2

请检查您的代码我认为有断线
标签，如果您删除它会导致问题，它将显示项目内联块;

另一种解决方案

而不是使用display：inline-block，你可以这样做

#gal-1
{
display:flex;
display: -ms-flexbox;
display: -webkit-flex;
}
#gal-1 img
{
display:inline-flex;
}

为什么这些图片不接受显示：内联属性？

2 个答案: