Carlos Rocha 4 Posted May 25, 2019 Report Share Posted May 25, 2019 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
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now