html - 表单元素错位

Question

我很难将表单元素放在我喜欢的位置。

我喜欢我的选择(重复)输入字段下方的 recurrence_interval 输入字段。

我的两个单选框分别是 never 和 on。在彼此之上，ends_on_date 的输入字段位于“开”复选框下方。

我的 html 如下。

    <div id="dialog" title="Create new appointment">
        <form id="df">
            <label class="align" for="title">Title</label>
            <input type="text" name="title" id="title">
            <label class="align" for="when">When</label>
            <input type="text" name="when" id="when">

            <input id="repeat" type="checkbox">
            <label id="repeat_text" for="repeat">Repeat...</label>
            <div id="repeat_properties">
                <label class="align" for="recurrence">Repeats</label>
                <select id="recurrence">
                    <option value="1">Daily</option>
                    <option value="7">Weekly</option>
                    <option value="repeat-x-days">Every x day</option>
                </select>
                <input id="recurrence_interval" type="text">

                <label class="align" for="ends_never">Ends</label>
                <input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked">
                <label for="ends_never" title="Ends never">Never</label>
                <input id="ends_on" name="endson" type="radio" title="Ends never">
                <label for="ends_never" title="Ends never">On</label>
                <input class="align" id="ends_on_date" type="text">
            </div>
        </form>
    </div>

我的CSS如下。

.align {
    display: inline-block;
    float: left;
    clear: left;
    width: 30%;
    text-align: left;
}

input[type="text"], input[type="radio"], select {
    display: inline-block;
    float: left;
    clear: right;
}

#repeat
{
    display: inline-block;
    float: left;
    text-align: left;
    clear: left;
}
#repeat_text
{
    float: left;
}

有人知道我如何归档上述内容吗？

编辑:如图所示here ，至少对于 chrome，字段显然不合适。

Answer 1

改变你的 radio HTML 结构，尝试使用这个。

<label for="ends_never" title="Ends never"><input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked"> Never</label>
<label for="ends_never" title="Ends never"><input id="ends_on" name="endson" type="radio" title="Ends never"> On</label>
                

已编辑

尝试添加样式 label { float : left; }