0

私はあなたが助けてくれるかどうか疑問に思っていました。この画像の丸で囲まれた要素を水平
に表示する簡単な方法を探しています 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>
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 をフロートします。新しく作成した 3 つの div をすべて同じ親 div に配置します。また、古いブラウザでは問題があるため、display: inline-block は避けます。浮くだけで同じ効果が得られます。

于 2013-10-30T15:21:31.517 に答える
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 に答える
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 に答える