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;
}

使用嵌入式块显示：

https://jsfiddle.net/k5rc8s92/2/

<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相比，它已经过时且混乱。此外，请尽量避免使用内联样式。

将输入浮动到与元素同一行的右侧

1 个答案: