0

有没有办法在不使用表格的情况下将文本输入框与按钮对齐？我尝试使用重置并清除边距和填充。如下图所示，按钮未与输入元素对齐。我必须使用表格来对齐它们还是有其他方法？ 在此处输入图像描述

我说的是按钮与文本字段相比如何缩进。代码很简单：

<!DOCTYPE html>
<html>
<head>
<style>
input {
    display: inline;
    margin: 0px;
}
</style>
</head>
<body>
<form>
    <input name="q" type="text" placeholder="Search users"/>
    <br>
    <input value="Search" type="submit"/>
</form>
</body>
</html>
4

2 回答 2

1

试试这个 CSS：

input[type=text] {
    display: block;
}
input {
    margin: 0;
}

演示

- 编辑 - 

input[type=text] {
    display: block;
}

input {
    margin: 1px 0;
    border: 1px solid black;
}

演示

于 2013-07-26T20:03:02.560 回答
1

是的，您可以，这是默认行为。

http://jsbin.com/icuyob/1/edit

<input name="q" type="text" placeholder="Search users"/>
<br>
<input value="Search" type="submit"/>

只需从您的 html 中删除换行符，元素将彼此相邻对齐，即使没有任何 css。

于 2013-07-26T20:04:20.010 回答