Why don’t these images accept display: inline property?

1 Views

I’m using WordPress Twenty Sixteen theme. I’ve created a page and now I have inserted 4 images in it. When I open the page, the images are displayed in vertical order, i.e., 1 above other. They aren’t assigned display: block property either. I tried display: inline and display: inline-block properties, but they aren’t working. These are clearly shown in inspect element, but they don’t affect the elements. (Also, float: left works perfectly, but I want display: inline to work).

What is the problem and how can I solve it?
Here’s the text written in the page:

<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>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. It will work if you use this:

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

    This will match div gal-1 child when it is an img.
    Use !important if necessary to override any display: block;

  2. please check your code i think there is break line
    tag which is causing issue if you remove
    it will display items inline block;

    another solution

    instead of using display:inline-block you can do like

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