Question

我有一个必须如此常见的场景，但我还没有想出一个理想的解决方案。

我有以下结构 - 这是显示html如何布局的方式。

<div>
    <label></label> <input></input>
    <span>this is where the validation goes</span>
</div>

我遇到的问题是标签，有时足够长，可以包裹2行。我希望能够将它与输入元素并排放置，无论它是1行还是2行。

关于解决此问题的最佳方法的任何想法？

Answer 1

我可以想到1个解决方案，但我不确定你想要什么。我会解释并给你一个例子。

首先制作您的<div> position:relative，然后<input> position: absolute。然后，您的top属性必须设置为50％。

如果我们不准确地在中心，我们必须给<input>一些高度，最后给他margin-top: -(height/2)。

div { position:relative; }
label { width: 200px; display: inline-block;  }
input { width: 200px; height: 20px; position: absolute; top: 50%; margin-top: -10px;}

然后只是构建跨度。

如何将标签与输入字段对齐

1 个答案: