I'm trying to create a list with 4 blocks, but they are not aligned side-by-side correctly, look like this:
Iwouldlikeittolooklikethis:
HTML:
<li></li>
<li></li>
<li></li>
<li></li>
CSS
#test li {
width: 230px;
height: 140px;
margin: 0;
border: 1px solid red;
background: #999;
float: left;
overflow: hidden;
}
Why are not they aligning?
Following is a CSS3 solution that takes into account several factors:
Variable width: you can tweak the size of the UL, which cells will follow;
Security setting 50% to not "pop up" available space for browser inconsistencies;
html, body, ul { /* aqui o que importa é o UL, o resto é pra estética do demo. */
position:relative; /* reset do position, não relacionado ao demo, mas bom pra uso geral. */
margin:0; /* Zeramos as margens e o padding do UL para as células.encostarem */
padding:0;
width:100%; /* por default, os blocos são 100%, mas vamos garantir isso. */
height:100%; /* aqui foi feito pra fins de demonstração apenas. */
}
li {
display:block; /* primeiro passo, transformar o LI em bloco. */
list-style-type: none; /* depois, remoção dos bullets. */
margin:0; /* nao queremos espaços ente os blocos. */
background-color:#666; /* cor de fundo principal, o "grid" fazemos depois */
box-sizing: border-box; /* medidas são de borda à borda, o padding não é acrescentado. */
height:25%; /* esta linha é pela estética do demo */
}
li:nth-child(odd) { /* este css será aplicato nos LI impares (1, 3, 5... ). */
clear:both; /* forçamos a quebra de linha por segurança... */
float:left; /* ... e o alinhamos à esquerda. */
width:50%; /* Aplicamos 50% na esquerda, os da direita "herdam" o resto. */
}
li:nth-child(4n+2), /* aqui pulamos de 4 em 4 itens começando do 2 ( 2, 6, ...). */
li:nth-child(4n+3) { /* aqui de 4 em 4 começando do 3 ( 3, 7, ... ) */
background-color:#444; /* e mudamos a cor, dando efeito de quadriculado */
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>You could do this by only affecting the odd blocks:
ul li {
width: 230px;
height: 140px;
margin: 0;
border: 1px solid red;
background: #999;
overflow: hidden;
}
ul li:nth-child(odd) {
float:left;
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
You can also set the width to be 50%
ul{width: 400px; height: 400px; list-style:none; margin:0; padding: 0; font-family: Arial; color: #FFF; font-size: 1.5em}
li{float: left; width:50%; height: 50%; padding: 0; background-color: #292929;}
li:first-child, li:last-child{background-color: #222222 !important;}
li > span{display: block; width: 100%; text-align: center; padding: 44% 0;}<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>Assigning display: inline-block resolves in part, you can also add width to break according to size. I hope this time helps and clarifies the doubts. Here is the very good link: link
ul {width: 30px;}
ul li {
display: inline-block;
}
I particularly prefer using "display: inline-block", because using float causes the parent element (in this case to "ul") to lose height, so you need more property (s) so that to "ul" do not lose height.
ul {
font-size: 0;
}
ul li {
box-sizing: border-box;
display: inline-block;
width: 50%;
height: 140px;
margin: 0;
border: 1px solid red;
background: #999;
overflow: hidden;
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>