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

Question

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

这是我的代码片段：https://jsfiddle.net/duqpn0wd/ CSS：

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

包装器：

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

在这个示例中，您可以看到一个文本和一个按钮。但是我需要它们像这样左对齐和右对齐：

TEXT BUTTON

现在使用inline-block有所帮助，但我需要每个元素都是内联的，并且紧接着的行也是内联的，因此它将合并到我的现有第一行中，就像这样：

TEXT BUTTON TEXT BUTTON

有什么好的方法可以正确地做到这一点吗？

- heyblackduck

---

你将文本置于<p>标签中，这些是块级元素。使用<span>警报声： </span>。 - user5734311

这也是一个很好的观点，谢谢。 - heyblackduck

Answer 1

在 .inline-block 元素内部使用 float: left; 来对 p 元素进行排列：

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

- Ionut Necula

---

好的，很整洁，我喜欢它的宽度，因为它可以换行。谢谢。 - heyblackduck

Answer 2

只需将这段代码添加到您的CSS中。

.inline-block > p {
  float: left;
}

- NeuTronas

Answer 3

只需使用以下代码修改您的CSS

.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">
<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>

- Aditya Raj

---

通常而言，像那样更改 p 可能是个坏主意。 - user5734311

我刚向他展示了如何实现他的目标，他可以在CSS中添加id到p并使用。 - Aditya Raj

Answer 4

你可以指定你的CSS代码为：

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

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

将任何元素添加到您的类中都将对齐在单行中。

- YSuraj