label 和输入在反应中不在同一边距

Question

如何让我的 url 和 https:// 以相同的边距开始？

    <div className="card">  
        <div className="card-body">
            <div className="form-group col-12">
                <label className="">URL</label>
                <div className="row">
                    <p className=""> {baseURL} </p>
                    <input type="text" name="url" id="url" value={url} onChange={this.onURLChange}/>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以使用flexbox作为 -

.row {
  display: flex;
  align-items: center;
}

Answer 2

如果将label包装为具有与input相同的 className ( row ) 的div ，您可能会看到相同的结果。

<div className = "row">
   <label className="">URL</label>
</div>

Answer 3

在这种情况下，我会将以下内容添加到 class form-group中，我还假设您希望 label 和输入之间有一些空间，因此我添加了一些您可以调整的填充。

.form-group {
  display: flex;
  align-items: center;
  padding-right: .5rem;
}

还要在 label 上添加for ，使其与输入名称匹配。 这样做单击它将集中输入。

<label for="url">URL</label>