html - Trying to display nested div inline -
i have div made of nested elements having trouble displaying inline:
https://jsfiddle.net/stref/bp5ze9pn/
#liverpool-circle { display: inline; } #kings-circle { display: inline; } #london-circle { display: inline; } #waterloo-circle { display: inline; } #padidngton-circle { display: inline; }
just add 1 class don't have repeat css line https://jsfiddle.net/bp5ze9pn/4/
html
<div id="liverpool-circle" class="circle"> <a onclick="liverpool();"> <div class="circle"> <h3 class="numbers">3</h3> </div> </a> </div> <div id="kings-circle" class="circle"> <a onclick="kings();"> <div class="circle"> <h3 class="numbers">7</h3> </div> </a> </div> <div id="london-circle" class="circle"> <a onclick="london();"> <div class="circle"> <h3 class="numbers">8</h3> </div> </a> </div> <div id="waterloo-circle" class="circle"> <a onclick="waterloo();"> <div class="circle"> <h3 class="numbers">11</h3> </div> </a> </div> <div id="paddington-circle" class="circle"> <a onclick="paddington();"> <div class="circle"> <h3 class="numbers">18</h3> </div> </a> </div>
css
.circle { display: inline-block; }
Comments
Post a Comment