如何将div与表单的输入元素对齐?

夜哨

我想将3 div(将包含图标)与表单的输入字段垂直对齐。有什么解释为什么即使我将其设置为0后,表单元素也仍然表现为具有最高边距?

<form>
    <div></div>
    <div></div>
    <div></div>
    <input type="text" placeholder="username">
    <input type="password" placeholder="password">
</form>

* {
    margin: 0;
    padding: 0;
}
form {
    border: 1px solid black;
    display: inline-block;
}
div {
    display: inline-block;
    height: 32px;
    width: 32px;
    background: red;
}

http://jsfiddle.net/pnW4C/1/

谢谢。

乔什·克罗齐耶(Josh Crozier)

您将添加vertical-align:top元素以解决对齐问题。

这里的例子

div {
    display: inline-block;
    height: 32px;
    width: 32px;
    background: red;
    vertical-align:top;  /* It works because they are inline-block.. */
}

另外,值middlebottom也可以工作。它只需是默认值之外的其他值baseline

如果您想知道为什么baseline按原样运行,请参阅此答案

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将div元素放在右下方并与另一个div左对齐

来自分类Dev

如何将<a> <img> </a>标签与div对齐

来自分类Dev

如何将div彼此对齐?

来自分类Dev

如何将div彼此对齐?

来自分类Dev

如何对齐引导表单输入

来自分类Dev

如何将多个元素彼此对齐?

来自分类Dev

如何将图像与div的底部对齐?

来自分类Dev

如何将元素与div框的右侧对齐?

来自分类Dev

如何使用CSS将图像旁边的表单元素对齐?

来自分类Dev

将标签对齐到表单元素内部输入的顶部?

来自分类Dev

CSS问题:如何将<div>元素(<div>,页眉,页脚和正文)与响应式网页设计垂直对齐?

来自分类Dev

如何将<svg>元素与文本对齐?

来自分类Dev

如何将数据输入中的报表输入表单?

来自分类Dev

如何将文本输入与<td>中的排序按钮对齐?

来自分类Dev

CSS如何将div中的元素与2列对齐

来自分类Dev

如何将输入字段垂直居中对齐?

来自分类Dev

如何将div彼此对齐?

来自分类Dev

CSS:如何将文本与高度调整后的输入元素的基线对齐?

来自分类Dev

如何将表单输入元素设置为隐藏?

来自分类Dev

如何将HTML中的输入标签与div的右下角对齐?

来自分类Dev

如何将这些元素与中心对齐?

来自分类Dev

如何将div元素对齐,有些元素有文本,有些没有文本?

来自分类Dev

如何将元素居中(搜索表单)?

来自分类Dev

如何将图像与div的底部对齐?

来自分类Dev

如何将分组的输入与对齐的表单结合在一起?

来自分类Dev

如何将这个垂直对齐的div右对齐?

来自分类Dev

如何将标签和输入与CSS对齐

来自分类Dev

如何将输入加入表单

来自分类Dev

如何将输入字段与html中div标签内的页面中心对齐

Related 相关文章

热门标签

归档