如何设置连续两行浮动的两个元素的样式？

Question

我遇到了一个问题。我在一个网站上工作，我想用一个标签来设置输入的样式，使其漂浮在右侧，标签保持在该行输入的顶部，但元素保持不变。这是我到目前为止所做的：<h2>Pacients Info</h2>        <button className="addNewPacient" onClick={showModal}>Create</button>        <button className="addNewPacient">Read</button>        <button className="addNewPacient">Update</button>        <button className="addNewPacient">Delete</button>        <label for="rowsNo"><b>Rows no.</b></label>        <input             type="number"             placeholder="Rows no"            name="rowsNo"            value="10000"            onChange={e => onInputChange(e)}        />label[for="rowsNo"],input[name="rowsNo"] {    float: right;}input[name="rowsNo"] {    width: 100px;}

Answer 1

将输入和标签包装在一些 div 容器中并为其添加样式，如下所示

<div className="some-class-name">

  <label for="rowsNo"><b>Rows no.</b></label>

  <input 

      type="number" 

      placeholder="Rows no"

      name="rowsNo"

      value="10000"

      onChange={e => onInputChange(e)}

  />

</div>

将 CSS 更新为

.some-class-name {

  display: flex;

  flex-direction: column;

  float: right;

  min-width: 100px;

}

input[name="rowsNo"] {

  width: 100px;

}

而不是使用 float 将推荐使用 CSS 的 flex 属性，它真的让喜欢更容易。