css - 如何设计我的表单样式以便多个输入位于一行中？

Question

我有以下代码:

<?php
    echo $form->create('User', array('url' => array('controller' => 'users', 'action' =>'login')));
echo $form->input('User.username');
echo $form->input('User.password');
echo $form->end('Login');
 ?>

这会创建一个类似于此的表单:

username
[TextBox]
password
[TextBox]

我希望它看起来像这样:

username [TextBox]  password [TextBox]

是否有一个选项或我可以用来执行此操作的东西？

Answer 1

要么让元素彼此相邻 float ，要么将它们显示为内联。我通常只在绝对必要时才使用 float ——无论如何，内联元素使用起来要简单得多。

<form method="post" action="">
<fieldset>
    <dl>
        <dt><label for="username">Username:</label></dt><dd><input type="text" name="username" value="Username" id="username" /></dd>
        <dt><label for="password">Password:</label></dt><dd><input type="password" name="password" id="password" /></dd>
    </dl>
</fieldset>
</form>

基本上您需要添加的只是 inline-block 或 inline 到您的列表元素:

dt { display: inline; }
dd { display: inline; }

预览:http://jsfiddle.net/Wexcode/Wav9B/