horizontaly对齐HTML元素

本文介绍了horizontaly对齐HTML元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

NOWRAP