0

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

我努力了：

.calculator {
display: inline-block;  
}

然而，这似乎没有任何区别。我添加了 HTML 以供参考。
先谢谢了 

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

3 回答 3

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>

然后浮动每个 div。我会让三个新创建的 div 都生活在同一个父 div 中。另外，我会避免 display: inline-block，因为它在旧浏览器中存在问题。只是漂浮，你会得到同样的效果。

于 2013-10-30T15:21:31.517 回答
0

尝试这个 ：

.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>
于 2013-10-30T15:19:32.200 回答
0

这是一个带有工作模型的代码笔。

您尝试影响的元素display: inline-block不会从.calculator父元素继承该行为。您需要直接针对他们。

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

HTML：

<div class="calculator">
  <div class="calculator-submodule 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="calculator-submodule 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>
  </div>
  <div class="calculator-submodule">
    <span>£</span>
    <span id="total"></span><span>.00</span><button class="btn green"     onclick="myFunction()">Calculate</button>
  </div>
</div>

CSS：

.calculator-submodule {
  display: inline-block;
  padding-left: 1em;
  text-align: center;
}
于 2013-10-30T15:27:40.400 回答