horizo​​ntaly对齐HTML元素 [英] Aligning HTML elements horizontaly

问题描述

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

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;
}

这篇关于horizo​​ntaly对齐HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！