El problema es que h1, por defecto, la mayoría de navegadores lo renderizan con estos valores:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Como ves tiene la propiedad display:block
. De ahí que se te esté mostrando cada elemento como un bloque entero.
Una opción es cambiar el display
del h1
a inline
:
h1{
display:inline;
}
Aunque tienes que tener en cuenta que al tener al lado del círculo un texto, te saltará de línea, como puedes ver aquí:
/* Círculos de colores numerados */
h1{
display:inline;
}
span.red {
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<h1><span class="grey">1</span>Un circulo gris con un número interior</h1>
<h1><span class="red">2</span>Un circulo rojo con un número interior</h1>
<h1><span class="blue">3</span>Un circulo azul con un número interior</h1>
<h1><span class="green">4</span>Un circulo verde con un número interior</h1>
<h1><span class="pink">5</span>Un circulo rosa con un número interior</h1>
Si sólo quieres mostrar los círculos, quedaría así:
/* Círculos de colores numerados */
h1{
display:inline;
}
span.red {
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<h1><span class="grey">1</span></h1>
<h1><span class="red">2</span></h1>
<h1><span class="blue">3</span></h1>
<h1><span class="green">4</span></h1>
<h1><span class="pink">5</span></h1>
E incluso podrías ahorrarte el h1
y jugar con la propiedad font-size
. Te dejo este ejemplo con distintos tamaños:
span.red {
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size:3em;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
font-size:3em;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size:4em;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size:5em;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size:2em;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<span class="grey">1</span>
<span class="red">2</span>
<span class="blue">3</span>
<span class="green">4</span>
<span class="pink">5</span>