Question

我努力将我的表单元素放在我喜欢的地方。

我喜欢我的select（recurrence）输入字段下面的recurrence_interval输入字段。

我的两个收音机盒从不打开。在＆＃34; On＆＃34;。

的复选框下方，并且end_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

更改广播的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; }

表单元素不合适

1 个答案: