Inline display does not work properly with span

Question

Man display:inline not working properly would like to know where I am missing it should look like this one:

But I can’t follow my code below:

.abertura-chamados li {
  display: inline;
}
.abertura-chamados li a img {
  width: 10%;
}

<ul class="abertura-chamados">
  <li>
    <p:commandLink>
      <img src="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Abertura de chamados manutenção</span>
    </p:commandLink>
  </li>
  <li>
    <p:commandLink>
      <img src="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Prisma Sisteplant</span>
    </p:commandLink>
  </li>
</ul>

Note: I am using XHTML or the images are set with the tag <h:graphicImage name="..." library="images"> cannot add images with this tag I don’t know why I finally <img>

Answer 1

This is because when the screen resolution is too small, the list - also known as li will automatically be split into multiple lines because the image and/or the li are too big to fit on the screen unless there was a parent whose the width is set or is larger than the current screen width, for example:

.container {width:1000px;}
.abertura-chamados li {display: inline;}

<div class="container">
<ul class="abertura-chamados">
    <li>
        <img src="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Abertura de chamados manutenção</span>
    </li>
    <li>
        <img src="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Prisma Sisteplant</span>
    </li>
</ul>
</div>

In the example above we cannot have the images "inline" because the li and the img are too big because we do not specify any parameters for their widths and heights, and because their parent does not have a defined width and its default width will be width:100%;. But if we did they would be presented something like this example below: http://jsfiddle.net/fmsq5k1x/

.abertura-chamados li {
    display: inline;
    float: left;
    max-width: 130px;
}
.abertura-chamados li img {
    display: block;
    width: 100%;
}

<div class="container">
<ul class="abertura-chamados">
    <li>
        <img src="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Abertura de chamados manutenção</span>
    </li>
    <li>
        <img src="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Prisma Sisteplant</span>
    </li>
</ul>
</div>

Either way it will always be broken into several lines unless we have a div parent with a specified width as for example: width:700px; as I mentioned earlier. But we can always postpone your "partition" as in the example above or using media queries etc.