Problems with spaces between li's

Question

Problems with spaces between li's

Navigation

#1 by (1 votes)

2

Good morning!

See the figure below.

Ihavethefollowingcss

ul.listaTopo,ul.listaRegistros{clear:both;}ul.listaTopo{background-color:#000;color:#FFF;}ul.listaTopoli,ul.listaRegistrosli{display:inline-block;height:50px;line-height:50px;vertical-align:middle;text-align:center;font-weight:bold;}

Andthefollowinghtml

<h1class="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, ul listaTopo , every li , has a space between them. But ul listaRegistros , with the same style , is not giving this space between its li's .

How to solve this?

css css3

asked by anonymous 01.05.2016 / 18:37

1 answer

How to create style condition in Jaspersoft Studio? Return fields from parameters

score 1 · Answer 1

The problem is that inline-block does not work when you need to use full width with multiple elements, because of the 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 this case I just removed margins and paddings from 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;
}

I floated the li :

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

Another option is to remove whitespace between tags , such as already quoted in comments .

Note: It seems to me that you want to tabulate data, in this case it is appropriate to use table and not ul .