"> "> " />

CSSを使用してHTML要素を同じ行にきれいに配置する方法

私の質問は、同じ行に2つの要素をきれいに並べる方法です。

Here is my fiddle: https://jsfiddle.net/duqpn0wd/

CSS:

    .inline-block {
    display: inline-block;
    }

ラッパー:

    <div class="inline-block">
    </div>

フィドルでは、その下にボタンのあるテキストを見ることができますが、左寄せと右寄せにする必要があります。

テキストボタン

今のところインラインブロックを使うのは助けになりますが、各要素をインラインにし、その後の行もインラインにする必要があります。

テキストボタンテキストボタン

これを適切に行う方法について何かアイデアはありますか?

0
テキストを

に入れます。それらはブロックレベルの要素です。 アラームホーンを使用:

追加された 著者 Chris G,
これも良い点です、ありがとう
追加された 著者 Robert Medina,

4 答え

.inline-block 内の p には float:left; を使用します。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.inline-block {
    display: inline-block;
    width: 100%;
 }
 .inline-block p{
   float: left;
 }
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="collapsible">
  

Alarm

<div class="inline-block">

Alarm Horn:

</div> <div class="inline-block">

Alarm Light:

</div> </div> <div data-role="collapsible">

Fault

<div class="inline-block"> <button id="number-input-1" class="keyboard-input" data-inline="true">100</button> </div> </div>
</div> </div>

4
追加された
@RobertMedina、どういたしまして。あなたがそれがあなたを助けたと考えるならば、答えを受け入れることを忘れないでください。
追加された 著者 Ionut,
きれいできれいです、それはそれが次の行に行くようになるので幅が好きです。ありがとうございました
追加された 著者 Robert Medina,

このコードをCSSに追加するだけです。

.inline-block > p {
  float: left;
}
1
追加された

あなたのCSSを次のように指定することができます。

.inline-block { /* select the class */
display: inline-block;
}

.inline-block *{ /* select all the child element  */
 display: inline-block;
}

クラスに要素を追加すると、1行に配置されます。

0
追加された

これであなたのCSSを修正するだけです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.inline-block {
	display: inline-block;
}
p{
  display:inline-block;
}
select{
  display:inline-block;
}
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="collapsible">

Alarm

<div class="inline-block">

Alarm Horn:

</div> <div class="inline-block">

Alarm Light:

</div> </div> <div data-role="collapsible">

Fault

<div class="inline-block"> <button id="number-input-1" class="keyboard-input" data- inline="true">100</button> </div> </div>
</div> </div>

0
追加された
このように p を変更するのはおそらく悪い考えです。
追加された 著者 Chris G,
私は彼がどのように彼の目標を達成することができるかを彼に示した、彼は p id を加えてcssで使うことができます。
追加された 著者 Aditya Raj,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript