Как мне оформить мою форму так, чтобы несколько входов находились в одной строке?

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

Оберните все поля в один div.Перемещайте все влево, устанавливая соответствующие поля справа.Очистить div.

Answer 3

После того, как я боролся с css-стилями, я в итоге использовал такие таблицы:

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