ul.semaforo {
position: relative;
width: 20px; /* para 5 (ancho li x nº de círculos total) */
margin: 0px auto;
padding: 0;
list-style-type: none;
}

ul.semaforo li {
position: relative;
display: block;
float: left;
width: 20px; /* ancho de cada círculo */
height: 20px;
border-radius: 50%;
background: lightgrey;
}

.rojo li:nth-of-type(1) {
background: #cc0000;
}
.naranja li:nth-of-type(2) {
background: #FF9326;
}
.verde li:nth-of-type(3) {
background: #00ff00;
}
.azul li:nth-of-type(4) {
background: #3366ff;
}
.amarillo li:nth-of-type(5) {
background: #ffff00;
}