horizo​​ntaly对齐HTML元素元素、horizo、ntaly、HTML

2023-09-11 08:01:03 作者:没有特别关心的人

如何使这些元素紧挨着别人,不低于对方的?

how to align these elements next to each others and not below each others?

<form action="http://xx.xxx.com/checker.php" method="post">
<input type="hidden" name="tokenz" value="9oaisdkjasiduqasdkjiwue" />
<input type="hidden" name="directz" value="true" />
Domain: <input type="text" name="domain" size="20" /> <select name="ext">
<option>.com</option>
<option>.org</option>
<option>.net</option>
<option>.biz</option>
<option>.info</option>
<option>.us</option>
<option>.pw</option>
<option>.in</option>
<option>.name</option>
<option>.mobi</option>
<option>.asia</option>
</select>
<input type="submit" value="Go" />
</form>

感谢

Many thanks

推荐答案

该表单只包含内联元素。这意味着它们都将保持在同一行,直到它们包裹

The form contains inline elements only. This means they will all remain on the same line, until they wrap.

如果你想prevent包装,尽量空白:NOWRAP 并为容器的宽度

If you want to prevent wrapping, try white-space: nowrap and give the container a width.

小提琴

http://jsfiddle.net/Ballcheck/XbzdK/

HTML

<form action="http://xx.xxx.com/checker.php" method="post">
<input type="hidden" name="tokenz" value="9oaisdkjasiduqasdkjiwue" />
<input type="hidden" name="directz" value="true" />
Domain: <input type="text" name="domain" size="20" /> <select name="ext">
<option>.com</option>
<option>.org</option>
<option>.net</option>
<option>.biz</option>
<option>.info</option>
<option>.us</option>
<option>.pw</option>
<option>.in</option>
<option>.name</option>
<option>.mobi</option>
<option>.asia</option>
</select>
<input type="submit" value="Go" />
</form>

CSS

form {
    white-space: nowrap;
    border: 1px solid red;
    width: 200px;
}