Html 内联显示元素

我想知道你是否能帮忙。
我正在寻找一种简单的方法来水平显示这张图片中的圆圈元素

我试过：

.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>

成人（12岁以上）
-
+
儿童（2-11岁）
-
+
英镑
.00
计算

试试这个：

.input-group.input-small {
    display: inline-block;  
}

为此：

<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>
                </div>
                <div class="input-group input-small">
                    <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>

成人（12岁以上）
-
+
儿童（2-11岁）
-
+
英镑
.00
计算

将这些内容放在它自己的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>

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

成人（12岁以上）
-
+

然后把这些东西放在它自己的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>

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

Child（2-11）
-
+

然后在它自己的分区中：

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

.00

算计

然后浮动每个div。我将使三个新创建的div都位于同一个父div中。此外，我将避免display:inline块，因为它在旧浏览器中存在问题。只要浮动，你就会得到同样的效果。

您试图使用

显示：内联块
影响的元素不会从
.calculator
父元素继承该行为。你需要直接瞄准他们

关于类的命名和元素的选择，我有很多需要修改的地方，但至少需要为计算器组件创建一个单独的类，将计算器结构分解为上述组件，并且需要将段落转换为跨距：

HTML:

我不同意这一点：
我会避免display:inline块，因为它在较旧的浏览器中存在问题
。它适用于所有现代浏览器和IE8+：。IE8也适用于Windows XP。我知道没有任何有效的论据支持比IE8更老/更差的东西。好吧，如果你与国际网站打交道，你会注意到中国仍然主要使用IE6。我知道。那太疯狂了。此外，IE7还在世界其他地区使用，包括美国。不过，你说得对。内联块在现代浏览器中工作得很好，但我的观点是——旧的浏览器将会崩溃。Opera在白俄罗斯等地拥有主要的市场份额。那么？没有人“为歌剧而发展”，即使其市场份额大于IE7+IE6。我相信支持IE7和贝娄弊大于利，太具体了。当他决定使用
输入介质时会发生什么？这也会将所有相关元素放在第二个输入下面。