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

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -