html表单布局

我正在尝试创建一个注册表单，并且遇到了一个问题。 jsfiddlehere 输出如下图所示如图中所示，我希望地址位于行的顶部，如图所示，而不使用相对或绝对的样式位置。有没有可能用margin或padding来解决这个问题。另一件事是为什么地址文本出现在底部，默认情况下不在顶部？是因为textarea吗？在此先感谢html表单布局

来源

2016-07-26 jayachandra chillipuri

CSS #address跨度{ vertical-align：top; } –

我也想知道如何在父div（height：100px）顶部，中间或底部安排一个div div（height：10px）。我们是否可以使用这种垂直对齐方式将其排出或垂直对齐仅适用于文本？ –

要对齐verticaly 2 inline-block的元素，你可以使用vertical-align。你的情况：

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

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

这里是一个fiddle。

来源

2016-07-26 08:01:24 tzi

Ty bro寻求答复。这背后的原因是由于垂直对齐的默认值是底部？你能检查我的代码并告诉我设计布局的有效方法吗？我在做有效的方法还是需要改进？ –

，我也想知道如何在父div（高度：100px）顶部，中间或底部安排一个子div（高度：10px）。我们是否可以使用这种垂直对齐方式将其排出或垂直对齐仅适用于文本？ –

使用'inline-block'元素来渲染一个标签和一个输入是非常好的。但对于响应可能会很棘手。 – tzi

添加到您的CSS ...

#address span{ 
    vertical-align:top; 
}

来源

2016-07-26 08:01:03 Sankar

Ty bro回复。这背后的原因是由于垂直对齐的默认值是底部？你能检查我的代码并告诉我设计布局的有效方法吗？我在做有效的方法还是需要改进？ –

这样写

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

的HTML添加到您的CSS

span textarea {vertical-align:top;}

此代码应保持标签在上面，然后你会需要你的texarea对齐到其他文本字段

来源

2016-07-26 08:24:10 yanguya995

回答

相关问题