html - 内联显示元素

Question

我想知道你是否可以帮忙。
我正在寻找一种简单的方法来显示此图片中带圆圈的元素 https://db.tt/w5doYPNZ水平。

我试过:

.calculator {
display: inline-block;  
}

然而，这似乎没有任何区别。我已经添加了 HTML 以供引用。
提前致谢:D

<div class="calculator">
    <div class="input-group input-small">
        <h4>Adult (12+)</h4>
        <button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
        <input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
        <button class="btn theme-btn" id="increase" value="Increase Value">+</button>
        <h4>Child (2-11)</h4>
        <button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
        <input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
        <button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
        <p>£</p><p id="total"></p><p>.00</p><button class="btn green" onclick="myFunction()">Calculate</button>
    </div>
</div>

Answer 1

将这些东西放在它自己的 div 中:

<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
<button class="btn theme-btn" id="increase" value="Increase Value">+</button>

然后把这些东西放在它自己的 div 中:

<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
<button class="btn theme-btn" id="increasec" value="Increase Value">+</button>

然后这个东西在它自己的 div 中:

<p>£</p><p id="total"></p>
<p>.00</p>
<button class="btn green" onclick="myFunction()">Calculate</button>

然后 float 每个 div。我会让三个新创建的 div 都位于同一个父 div 中。另外，我会避免显示:内联 block ，因为它在旧浏览器中有问题。只是漂浮，你会得到同样的效果。