Problems with spaces between li’s

Asked

Viewed 166 times

2

Good Morning!

See the figure below.

inserir a descrição da imagem aqui

I have the following css

ul.listaTopo, ul.listaRegistros {
    clear:both;
}

ul.listaTopo {
    background-color:#000;
    color:#FFF;
}

ul.listaTopo li, ul.listaRegistros li {
    display:inline-block;
    height:50px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    font-weight:bold;
}

And the following html

<h1 class="h1Centralizado">Listagem de Clientes</h1><br />

<div class="divLista" style="width:800px">
  <ul class="listaTopo">
    <li class="listaLi" style="width:300px">NOME</li>
    <li class="listaLi" style="width:200px">BAIRRO</li>
    <li class="listaLi" style="width:100px">BLOQUEIO</li>
    <li class="listaLi" style="width:100px">EDITAR</li>
    <li class="listaLi" style="width:100px">EXCLUIR</li>
  </ul>

  <ul class="listaRegistros">
    <li style='text-align:left; width:300px; background-color:#CCC; color:#FFF'>José Mário
    </li>
    <li style='text-align:left; width:200px; background-color:#CCC; color:#FFF'>São</li>
    <li style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='?acao=bloqdes&bloq=s&idCliente=1' onclick="return verifica('Deseja Bloquear este Cliente?')" '><img src='_img/bloquear.png' height=30px  title='Bloquear Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='clientesEditar.php?acao=form&idCliente=1'><img src='_img/editar.png' height='30px' title='Editar Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='?acao=excluir&idCliente=1' onclick="return verifica('Deseja Excluir este Cliente?')" '><img src='_img/excluir.png' height='30px'  title='Excluir Cliente'/></a>
    </li>

  </ul>

  <ul class='listaRegistros'>
    <li style='text-align:left; width:300px; background-color:#FFF; color:#CCC'>Carlos Aberto Ferreira Rocha
    </li>
    <li style='text-align:left; width:200px; background-color:#FFF; color:#CCC'>São</li>
    <li style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='?acao=bloqdes&bloq=s&idCliente=2' onclick="return verifica('Deseja Bloquear este Cliente?')" '><img src='_img/bloquear.png' height=30px  title='Bloquear Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='clientesEditar.php?acao=form&idCliente=2'><img src='_img/editar.png' height='30px' title='Editar Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='?acao=excluir&idCliente=2' onclick="return verifica('Deseja Excluir este Cliente?')" '><img src='_img/excluir.png' height='30px'  title='Excluir Cliente'/></a>
    </li>
  </ul>

</div>

<div style="clear:both; height:50px; width:100%;"> </div>

If you observe, the ul listaTopo, each li, has a space between them. But the ul listaRegistros, with the same style, is not giving this space between their li's.

How to solve this?

css css3

  • Not related to your problem, but it seems redundant to use "listLi", no? could already use the own li as selector. For example <ul class="listaRegistros meuLi"> and in the CSS .meuli li {.... thus avoid repeating the class in the Lis (this would be used in several different Uls, otherwise it would be enough in the CSS .listaRegistros li, .listaTopo li {...}

  • yes. agent is learning.. I’ve changed here. But then, some idea of my mistake?

  • Apparently the spaces come from the line breaking between the Lis. Try (as a test only) to take the closing of the </li> and comment if something has changed. Leave only the <li> but remove the </li> and tell if the spaces are missing. If solved, a possible solution is to put the locks back, but leaning against the following <li>

  • each li is a column. Ma why did not give the error on the bottom ul?

  • Probably because of the other elements inside. Here are some examples of how to remove inline-block spaces. It’s in English, but the codes are easy to understand: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ - Basically it’s changes in HTML formatting, not content. The problem is that tab and line breaks usually count as space.

  • Now, note: This list of records of yours should probably be a table, not a UL. Tabular data is formatted with table. UL is for simple lists.

  • Check it out: It’s strange because the style of one is the same as the other, inside the first ul only has text (default: inline). At the bottom ul, li’s are being populated with data coming from the bank that is nothing more than text as well. Does it check? Only the last 3 options are links. I can’t understand why this happens!

  • Actually occurring is normal, the strange thing is not to appear in others (it may be a mere matter of them existing, but being aligned with something else) :) - anyway, try some of the changes I commented on the linked page, to see if this is the case or if there is any other problem.

  • except the /li solved. But will it be because it did not give the bottom ones? I do not find logic. hehehe. I even made margin: 0 and paddindg: 0 and nothing

  • One of the solutions is to return the </li>, but instead of putting at the end of the line, put next to the next. For example, in the second li you close the first: </li><li>Segundo li jumper </li><li>Terceiro li and so it goes. There are other examples on that link, see which one looks best to format your code. We’re actually just changing the space. Another way out would be to change the inline-block for float:left. - but your case is typical for table, in fact, and not ul. The UL is not only semantically inadequate in this context will give you other headaches besides this.

  • Yes. The idea of using ul, and then I ask you for advice, an opinion, is that this system will run on mobies too and I want to put each li in a row and each ul with a different color and then with tables does not work because they will stay in rows and columns. Some guidance in this regard?

  • If you want to put this solution as an answer, I’ll take it as an answer!

  • Without seeing the whole layout is really complicated I throb, maybe it’s easier to do everything with div then, or use some of those solutions to "kill" the spaces. Maybe the simplest thing is to put everything in one line: <ul><li>1</li><li>2</li>...

  • even so. thank you very much!

Show 9 more comments

1 answer

1

The problem is that inline-block do not declare when you need to use the full width with several elements, because of the already mentioned white-Spaces or blank space.

One of the possible solutions is to use float in the elements:

Example:

ul.listaTopo, ul.listaRegistros {
    margin:0;
    padding:0;
}

ul.listaTopo {
    background-color:#000;
    color:#FFF;

}
ul.listaTopo::after, ul.listaRegistros::after {
  display:block;
  content:'';
  clear:both;
}

ul.listaTopo li, ul.listaRegistros li {
    display:inline-block;
    height:50px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    font-weight:bold;
    float:left;
    margin:0;
    padding:0;
}
<h1 class="h1Centralizado">Listagem de Clientes</h1><br />

<div class="divLista" style="width:800px">
  <ul class="listaTopo">
    <li class="listaLi" style="width:300px">NOME</li>
    <li class="listaLi" style="width:200px">BAIRRO</li>
    <li class="listaLi" style="width:100px">BLOQUEIO</li>
    <li class="listaLi" style="width:100px">EDITAR</li>
    <li class="listaLi" style="width:100px">EXCLUIR</li>
  </ul>

  <ul class="listaRegistros">
    <li style='text-align:left; width:300px; background-color:#CCC; color:#FFF'>José Mário
    </li>
    <li style='text-align:left; width:200px; background-color:#CCC; color:#FFF'>São</li>
    <li style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='?acao=bloqdes&bloq=s&idCliente=1' onclick="return verifica('Deseja Bloquear este Cliente?')"><img src='_img/bloquear.png' height=30px  title='Bloquear Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='clientesEditar.php?acao=form&idCliente=1'><img src='_img/editar.png' height='30px' title='Editar Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='?acao=excluir&idCliente=1' onclick="return verifica('Deseja Excluir este Cliente?')"><img src='_img/excluir.png' height='30px'  title='Excluir Cliente'/></a>
    </li>

  </ul>

  <ul class='listaRegistros'>
    <li style='text-align:left; width:300px; background-color:#FFF; color:#CCC'>Carlos Aberto Ferreira Rocha
    </li>
    <li style='text-align:left; width:200px; background-color:#FFF; color:#CCC'>São</li>
    <li style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='?acao=bloqdes&bloq=s&idCliente=2' onclick="return verifica('Deseja Bloquear este Cliente?')"><img src='_img/bloquear.png' height=30px  title='Bloquear Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='clientesEditar.php?acao=form&idCliente=2'><img src='_img/editar.png' height='30px' title='Editar Cliente' /></a>
    </li>
    <li style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='?acao=excluir&idCliente=2' onclick="return verifica('Deseja Excluir este Cliente?')"><img src='_img/excluir.png' height='30px'  title='Excluir Cliente'/></a>
    </li>
  </ul>

</div>

<div style="clear:both; height:50px; width:100%;"> </div>

In that case I just removed the margins and paddling of the elements li and ul

ul.listaTopo, ul.listaRegistros {
    margin:0;
    padding:0;
}

ul.listaTopo li, ul.listaRegistros li {
    margin:0;
    padding:0;
}

I added a clear-fix after each ul:

ul.listaTopo::after, ul.listaRegistros::after {
  display:block;
  content:'';
  clear:both;
}

And floated the li:

ul.listaTopo li, ul.listaRegistros li {
    float:left;
}

Another option is remove whitespace between tags, as already cited in the comments.

Obs.: It seems to me that you want to make a data tabluação, in that case the appropriate is to use table and not ul.

  • Got it. But, what about showing the table on a 320x480 cell phone? How to do with the table?

  • @Carlosrocha you can create a page for desktop’s and another only for cell phones. There are very efficient tools to detect the device user’s.

  • But if you don’t want to do that, you can just fix your CSS/HTML with the answer code. It’s not that the way you’re trying is wrong, any of this. It is only more conventional to use tables for data tabulation, but in some cases tables may not work, as in the case of tab responsiveness, in this case the use of li seems more appropriate to me.

  • got it, thanks for the feedback. I’ll take it easy.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.