试图显示嵌套的div内联

Question

我有一个由嵌套元素组成的div但是在内联显示它时遇到了麻烦：

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;
}

Answer 1

只需添加一个这样的类，这样您就不必重复css行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;
}