Question

在this JSfiddle中，我创建了一个不使用表的表单。

问题是我无法在“类型”的同一行和“结束数据”字段下面获取提交按钮。

有谁知道怎么做？

HTML

<div class="create-new">
    <div id="create_result" style="display:none;">
    </div>
    <form id="create_form" name="create_form" action="" method="post">
        <input name="anchor" id="anchor" value="create" type="hidden">

        <label class="new" for="title">Title:</label>
        <input class="new" type="text" name="title" id="title" />

        <label class="new" for="owner">Owner:</label>
        <input class="new" type="text" name="owner" id="owner" /><br class="new"/>

        <label class="new" for="users">Users:</label>
        <input class="new" type="text" name="users" id="users"/>


        <label class="new" for="groups">Groups:</label>
        <input class="new" type="text" name="groups" id="groups" /><br class="new"/>

        <label class="new" for="begin_date">Begin Date:</label>
        <input class="new" type="text" id="from" name="from"/>

        <label class="new" for="end_date">End Date:</label>
        <input class="new" type="text" id="to" name="to"/><br class="new"/>

        <label class="new" for="type">Type:</label>

        <input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel <br/>
        <input name="ctype" id="ctypee" value="course"    type="radio" /> Course <br/>

        <button class="n" type="submit">Create</button>
    </form>
</div>

CSS

label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; }
label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; }
textarea.new { height: 50px; }
br.new { clear: left; }
i    nput.n { display: block; float: right; width: 150px; }
.create-new { display: inline-block; position: relative; left: 25%; }

Answer 1

一种方法是将项目放入列表（ul），然后放入CSS集合display: inline;中，以便将两个元素放在同一行上。

Answer 2

你可以试试这个：

将button.n选择器添加到顶部的前两个标签行，以便它与标签一样，以及带有类型的标签。

button.n, label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; }
button.n, label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; }

如果上面代码中的n类名称是拼写错误，请使用正确的类名，可能是new而不是n。

Answer 3

仅更改css的唯一方法是为提交按钮之前的输入设置“display：inline”。

Answer 4

我将input.n更改为button.n并将样式调整为display:inline

button.n { display: inline; float: right; width: 150px; }

我还将代码中的按钮位置移到了标签

的正下方

<label class="new" for="type">Type:</label>

<button class="n" type="submit">Create</button>

<input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel

http://jsfiddle.net/jasongennaro/CKC29/

可以移动此提交按钮吗？

4 个答案: