内联显示元素
内联显示元素
提问于 2013-10-30 15:14:57
我在想你能不能帮忙。
我正在寻找一种简单的方式来显示这张图片中的圆圈元素，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>回答 3
Stack Overflow用户
回答已采纳
发布于 2013-10-30 15:27:40
这是一个有工作模型的代码库。
您试图用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;
}Stack Overflow用户
发布于 2013-10-30 15:21:31
把这些东西放进它自己的电脑里：
<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>那么这个东西就属于自己的领域：
<p>£</p><p id="total"></p>
<p>.00</p>
<button class="btn green" onclick="myFunction()">Calculate</button>然后把每个div都浮起来。我会让三个新创建的div都生活在同一个父div中。此外，我将避免显示:内联块，因为它在旧浏览器中有问题。只要浮起来，你就会得到同样的效果。
Stack Overflow用户
发布于 2013-10-30 15:19:32
试试这个：
.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19686656
复制相关文章
相似问题
腾讯云开发者
