如何使用CSS将HTML元素干净地放在同一行上

Question

我的问题是如何将两个元素干净地放在同一条线上.

这是我的小提琴:https://jsfiddle.net/duqpn0wd/

CSS:

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

包装:

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

在小提琴中你可以看到一个带有按钮的文本,但是我需要它们左对齐并且右对齐如下:

文字按钮

现在使用inline-block有帮助,但我需要每个元素都是内联的,之后的行也是内联的,这样就可以合并到我现有的第一行中,如下所示:

文字按钮文字按钮

有关如何正确做到这一点的任何想法？

Answer 1

使用float: left;了p内部.inline-block:

.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">
  <h3> Alarm </h3>
  <div class="inline-block">
    <p>Alarm Horn:</p>
    <select name="flipswitch-1" id="flipswitch-1" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
      <option value="off">OFF</option>
      <option value="on">ON</option>
    </select>
  </div>
  <div class="inline-block">
    <p>Alarm Light:</p>
    <select name="flipswitch-2" id="flipswitch-2" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
      <option value="off">OFF</option>
      <option value="on">ON</option>
    </select>
  </div>
</div>

<div data-role="collapsible">
  <h3> Fault </h3>
  <div class="inline-block">
    <label for="number-input-1">Start Fault Time:</label>
    <button id="number-input-1" class="keyboard-input" data-inline="true">100</button>
    <label for="number-input-1">seconds</label>
  </div>
</div>