CSS 2 x firkanter + tekst på samme linje
Hejsa.Jeg bøvler med noget CSS og håber på lidt input.
Jeg vil gerne på én og samme linje vise følgende venstrestillet:
1. En grå farvet firkant
2. Teksten ledig
3. En rød farvet firkant
4. Teksten optaget
Jeg har følgende CSS-kode, men det lykkedes ikke at placere det hele på samme linje:
.box {
float: left;
height: 17px;
width: 17px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
border: 1px solid #dddddd;
}
.gray {
background-color: gray;
}
.red {
background-color: red;
}
<div class='box gray'></div> Ledig<div class='box red'></div> Optaget
float: left;
height: 17px;
width: 17px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
border: 1px solid #dddddd;
}
.gray {
background-color: gray;
}
.red {
background-color: red;
}
<div class='box gray'></div> Ledig<div class='box red'></div> Optaget
