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

我遇到了一个问题。我在一个网站上工作,我想用一个标签来设置输入的样式,使其漂浮在右侧,标签保持在该行输入的顶部,但元素保持不变。

这是我到目前为止所做的:

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

}


一只甜甜圈
浏览 105回答 1
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 属性,它真的让喜欢更容易。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript