html 表单布局安排

Question

我在尝试创建注册表单时遇到了问题。jsfiddlehere 输出如下图所示如图所示，我希望地址如指示的那样位于行的顶部，而不使用样式位置相对或绝对。是否可以用边距或填充来解决这个问题。还有就是为什么地址文本出现在底部，默认情况下不是在顶部吗？是因为文本区域吗？提前致谢

Answer 1

将此添加到您的 CSS...

#address span{
  vertical-align:top;
}

Answer 2

要垂直对齐 2 个内联块元素，您可以使用 vertical-align。在你的情况下：

.container span {
    padding-left: 40px;
    display: inline-block;
    width: 30%;

    /* Add vertical alignment */
    vertical-align: top;
}

这里是fiddle.

Answer 3

这样写html

<span> Address <textarea cols="5" rows="10"></textarea></span>

将此添加到您的 css

span textarea {vertical-align:top;}

此代码应将标签保持在顶部，然后您需要将 texarea 与其他文本字段对齐

html form layout arrangement