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

将元素浮动到彼此旁边，或者以内联方式显示它们。我通常只在绝对必要时才使用浮点数 - 无论如何，内联元素更容易使用。

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

Answer 2

在我遇到css-styles之后，我最终使用了这样的表：

<?php
echo $this->Form->create('User', array('url' => array('controller' => 'users', 'action' =>'login'))); ?>
<table>
    <tr>
        <td><?php echo $this->Form->input('User.username'); ?></td>
        <td><?php echo $this->Form->input('User.password'); ?></td>
        <td><?php echo $this->Form->button('Submit Form', array('type'=>'submit')); ?></td>
    </tr>
</table>
<?php echo $this->Form->end(); //This and "create" has to be outside <table> to pass xhtml validation ?>

Answer 3

将所有字段换行到一个div中。将所有内容浮动到左侧，设置适当的右边距。清除div。

如何设置表单样式以便多行输入？

3 个答案: