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

【问题标题】：How to cleanly put HTML elements on the same line using CSS如何使用 CSS 干净地将 HTML 元素放在同一行
【发布时间】：2017-01-11 13:56:27
【问题描述】：

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

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

CSS：

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

包装器：

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

在小提琴中，您可以看到下面有一个按钮的文本，但我需要它们左对齐和右对齐，如下所示：

文本按钮

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

文本按钮文本按钮

关于如何正确执行此操作的任何想法？

【问题讨论】：

你把文本放在<p>，那些是块级元素。使用<span>Alarm Horn: </span>
这个也不错，谢谢

标签： javascript jquery html css jquery-mobile

【解决方案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>

【讨论】：

漂亮又干净，我喜欢它的宽度，因为它使它进入下一行。谢谢

【解决方案2】：

只需将此代码添加到您的 CSS 中

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

【讨论】：

【解决方案3】：

您可以将 CSS 指定为：

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

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

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

【讨论】：

【解决方案4】：

用这个修改你的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>

【讨论】：

像这样更改p 通常可能是个坏主意。
我刚刚向他展示了如何实现他的目标，他可以将id 添加到p 并在css中使用。