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

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 属性，它真的让喜欢更容易。