- 编辑 -

Question

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

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

<!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>

Answer 1

试试这个CSS：

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

DEMO

- 编辑 -

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

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

DEMO

Answer 2

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

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

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

只需从你的html中删除换行符，即使没有任何CSS，元素也会彼此相邻排列。

文本输入和按钮对齐

2 个答案:

DEMO

- 编辑 -

DEMO