Inline display does not work correctly with span

Question

Inline display does not work correctly with span

Navigation

#1 by (1 votes)

1

My display:inline does not work correctly I would like to know where I am wrong it should look like this here:

ButIcannotfollowmycodebelow:

.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>Aberturadechamadosmanutenção</span></p:commandLink></li><li><p:commandLink><imgsrc="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Prisma Sisteplant</span>
    </p:commandLink>
  </li>
</ul>

Note: I'm using XHTML ie the images are set with tag <h:graphicImage name="..." library="images"> I can not add the images with this tag I do not know why I used <img>

jsf xhtml

asked by anonymous 08.06.2015 / 22:14

1 answer

Change execution order of JavaScript files Help in genealogical tree in C

score 1 · Accepted Answer

This is because when the screen resolution is too small, the list - also known as li will automatically be multi-line match because the image and / or li are too large to fit on the screen, the unless there is a parent whose width is set or greater 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>Aberturadechamadosmanutenção</span></li><li><imgsrc="http://upload.wikimedia.org/wikipedia/pt/4/47/Riot_Games_logo.png" /><span>Prisma Sisteplant</span>
    </li>
</ul>
</div>

In the example above we can not get the "inline" images because li and img are too large 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 it would be something like this example below: link

.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>Aberturadechamadosmanutenção</span></li><li><imgsrc="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 multiple rows unless we have a parent div with a specified width such as width:700px; as I mentioned earlier. But we can always put off your "split" as in the example above or by using media queries etc.