ввод с плавающей точкой справа на той же строке, что и элемент

Question

У меня есть ниже код Angular, где я хочу получить текст в начале моего столбца, а затем ввод справа от моей страницы, все на одной строке.

Моя проблема в том, что следующий кодсмещает ввод вправо, но не держит все все в одной строке.

<div class="row pt-5">
  <div class="col-4">Stuff</div>
  <div class="col-1">Stuff</div>
  <div class="col-7">
    <h3 class="text-danger">Some Text!</h3>
    <div style="float:right">
      <input type="text"></input>
    </div>
</div>

Я читал в Интернете, что вставлять классы строк плохо, поэтому решил не идти по этому пути.Я также попытался поместить все в группу ввода, и это заставило все быть в одну строку, но я не могу перевести ввод справа.

Кто-нибудь знает, как решить эту проблему?

Answer 1

Для начала, input не принимает закрывающий тег.Все содержится внутри.Что касается вашего вопроса, вы можете использовать четкое исправление для clear:both, или вы можете использовать flexbox или display:inline-block, чтобы решить это довольно легко.Рассмотрим следующее:

Использование четкого исправления и значений с плавающей запятой:

https://jsfiddle.net/yLb5k3mj/2/

 <div class="another-div">
   <h3 class="some-text">Some more text!</h3>
   <input class="input2" placeholder="some input" />
   <div class="clearfix"></div>
 </div>

.some-text {
  float:left;
  margin:0;
  padding:0;
}
.input2 {
  float:right;
  margin:0;
  padding:0;
}
.clearfix {
  clear:both;
}

Использование отображения встроенного блока:

*Дисплей 1016 *

<h3 class="text-danger">Some Text!</h3>
<div class="some-div">
<label>input:</label>
  <input type="text" />
</div>

h3 {
  display:inline-block;
  width:40%;
  vertical-align:middle;
  text-align:left;
}
div {
  display:inline-block;
  width:50%;
  vertical-align:middle;
  text-align:right;
}
input {
  display:inline-block;
}

inline-block позволяет позиционировать элементы на одной и той же строке, тогда как дисплей уровня block означает, что каждый элемент займет всю свою строку.Использование свойства float - способ обойти это, но оно устарело и грязно по сравнению с inline-block или flexbox.Кроме того, старайтесь по возможности избегать встроенного стиля.