Jump to content

Lis se reduzindo de altura


Carlos Rocha

Recommended Posts

Carlos Rocha

O código:

<html>

<head>

<title>MVC PDO CRUD</title>

<link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.png"/>

<style>

/* CSS Document */

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

*,

*:before,

*:after,

*:active,

*:hover {

font-family: 'Open Sans';

margin: 0;

padding: 0;

border:0;

outline: none;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: content-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/

}

ul {

list-style: none;

}ul.topo{

background-color: #000000;

color: #FFFFFF;

}

ul.topo li {

text-align: center;

}

ul.ulHorizontal {

height: 50px;

}

ul.ulHorizontal li {

display: inline-block;

line-height: 50px;

}

ul.ulHorizontal li img {

vertical-align: middle;

}

img {

max-width: 100%;

}

a, a:hover {

text-decoration: none;

}

button,

input[type=button],

input[type=submit],

input[type=reset] {

cursor: pointer;

background-color: #CCCCCC;

}

button:hover,

input[type=button]:hover,

input[type=submit]:hover,

input[type=reset]:hover {

background-color: #DCDCDC;

border: 1px rgba(0,0,0,.2) solid;

}

button:active,

input[type=button]:active,

input[type=submit]:active,

input[type=reset]:active {

background-color: #FFFFFF;

}

/************ CORES **************/

.bgcCinza100 {

background-color: #CCC;

}

.bgcCinza25 {

background-color: #DCDCDC;

}

.bgcPreto100 {

background-color: #000;

}

.bgcBranco100 {

background-color: #FFF;

}

.bgcVermelho100 {

background-color: #F00;

}

.bgAzulCiano {

background-color: #007EAE;

}

/************ CORES **************/

</style>

<script type="text/javascript" src="scripts/js/bibliotecas/jquery-3.4.1.min.js"></script>

<script>

function verifica(msg) {

return confirm(msg);

};

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<body>

<ul class="ulHorizontal topo">

<li style="width:200px">CATEGORIA</li><!--

--><li style="width:200px">NOME</li><!--

--><li style="width:100px">PREÇO</li><!--

--><li style="width:100px">FRETE</li><!--

--><li style="width:100px">TRANSPORTE</li><!--

--><li style="width:100px">EDITAR</li><!--

--><li style="width:100px">BLOQUEIO</li><!--

--><li style="width:100px">EXCLUIR</li>

</ul>

<ul class=ulHorizontal id=listaRegistros style="background-color:#CCC">

<li style="text-align:left; width:200px;">Leve</li><!--

--><li style="text-align:left; width:200px;">Produto 1</li><!--

--><li style="text-align:right; width:100px;">120.33</li><!--

--><li style="text-align:center; width:100px;">1</li><!--

--><li style="text-align:center; width:100px;">Correios</li><!--

--><li style="text-align:center; width:100px;"><a href=""><img src="imgs/editar.png" height="30px" title="Editar Produto"/></a></li><!--

--><li style="text-align:center; width:100px;"><a href="" onclick="return verifica('Deseja Bloquear este produto');" ><img src="imgs/bloquear.png" height="30px" title="Bloquear Produto" /></a></li><!--

--><li style="text-align:center; width:100px;"><a href="" onclick="return verifica('Deseja Excluir este produto?');" ><img src="imgs/excluir.png" height="30px" title="Excluir Produto"/></a></li>

</ul>

</body>

</html>

Os problemas:

 

Na verdade eu gostaria de saber o porque de quando vou medir as alturas das lís elas estão se alterando.

As li's de acordo com o css devem ser de 50px lisas, sem bordas

Lis só de texto, estão reduzindo para 49,6px

Lis com as imagens, estão reduzindo para 30px

Onde está o erro?

Obs.:

Esse comportamento é visto no Chrome e somente no inspector. Pois no visual se vê normalmente.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.