Question

如何将这些元素彼此相邻而不是彼此之下？

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

Answer 1

表单仅包含内联元素。这意味着它们将保持在同一条线上，直到它们包裹起来。

如果您想阻止包装，请尝试white-space: nowrap并为容器指定宽度。

小提琴

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

Answer 2

以下是一个例子，如果你是这样的话：

<强>的jsfiddle：

http://jsfiddle.net/fhbha/

<强> HTML：

<ul id="reg-lists" >
    <li class="one">
        <select><option>Yes</option></select>
        </li> 
    <li class="two">
            <select><option>Yes</option></select>
        </li> 
    <li class="three">
            <select><option>Yes</option></select>
        </li> 
    </ul>

<强> CSS：

 li {
    display:inline !important;
    list-style-type: none;
    padding-right: 10px;    
}

水平对齐HTML元素

2 个答案: