java如何表格一样对齐_如何水平对齐表格？ (How can I horizontally align a form?)

最佳答案

英文原文

remove div tag like this :

中文翻译

删除div标签，如下所示：

＆LT;形式＆GT;

＆lt; input type =" email" placeholder =" example@ravvel.com" ＆gt;

＆lt; input class =" enter" type =" submit" value =" Send" /＆gt;

＆LT; /形式＆GT;

remove div tag like this :

删除div标签，如下所示：

＆LT;形式＆GT;

＆lt; input type =" email" placeholder =" example@ravvel.com" ＆gt;

＆lt; input class =" enter" type =" submit" value =" Send" /＆gt;

＆LT; /形式＆GT;

参考答案2

Simple way:

More style-ish way:

参考答案3

Get rid of your DIV. You don't need it.

参考答案4

You can add a float: left style to each div that wraps the form elements.

参考答案5

Add the CSS property display with the value inline to the DIV:

#yourdiv

{

display: inline;

}

参考答案6

Well, simply put - if you use float:left on your div elements, it should align them horizontally and get you on your way.

参考答案7

If you want all fields inside a form aligned, you can add display:inline as a CSS rule to the containing elements. I generally like to use paragraph tags to separate each label+input tag, or an un ordered list. To update your example:

form ul {

list-style:none;

}

form li {

display:inline;

}

This will work for each field you add as a new list item.

参考答案8

Input elements are inline-block, meaning they're always on the same line, the reason why you got 2 lines, is because the div element is a block element, in order for it to be able to be aligned with other elements in the same "line", it must be floated, or positioned not relatively.

参考答案9

Strangely, in my case, simply removing 'div' did not help. I have to explicitly put "float:left" to each input in order to get everything in one line. Hopefully it helps someone who falls in the same situation.