0

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

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

2 回答 2

2

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

如果你想防止包装，试着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;
}
于 2013-07-01T13:06:59.257 回答
0

这是一个示例，如果这是您的建议：

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;    
}
于 2013-07-01T13:05:30.763 回答