Мой вопрос заключается в том, как аккуратно поместить два элемента в одну линию.

Вот моя скрипка: https://jsfiddle.net/duqpn0wd/

Css:

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

Упаковочный :

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

В скрипке вы можете увидеть текст с кнопкой под ним, но мне нужно, чтобы они были выровнены по левому и правому краю так:

ТЕКСТОВАЯ КНОПКА

Прямо сейчас использование inline-block помогает, но мне нужно, чтобы каждый элемент был встроенным, а строка после этого также была бы встроенной, чтобы она слилась с моей существующей первой строкой следующим образом:

КНОПКА ТЕКСТА КНОПКА ТЕКСТА

Любые идеи о том, как сделать это правильно?

2
Robert Medina 11 Янв 2017 в 16:56

4 ответа

Лучший ответ

Используйте 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>
6
Ionut Necula 11 Янв 2017 в 14:09

Просто измените свой 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>
0
Aditya Raj 11 Янв 2017 в 14:24

Просто добавьте этот код в свой CSS

.inline-block > p {
  float: left;
}
1
NeuTronas - Lukas Ružauskas 11 Янв 2017 в 13:59

Вы можете указать свой CSS как:

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

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

Добавление любого элемента в ваш класс будет выровнено в одну строку.

0
YSuraj 11 Янв 2017 в 14:18