html - 对齐表单元素

Question

我正在尝试创建一个用于输入约会的表单。

我希望它像这样呈现:

Title [input]
When [input]
[] Repeat...

其中 [ ] 应说明复选框，[input] 应说明输入字段或类型文本。

下面是我的html和css:

.align {
  clear: left;
  display: inline-block;
  float: left;
  text-align: left;
  width: 30%;
}
input[type=text],
select {
  clear: right;
  display: inline-block;
  float: left;
}
#repeat {
  display: inline-block;
  float: left;
  text-align: left;
  width: 30%;
}
#repeat_text {
  float: left;
}

<div id="dialog-form" title="Create new appointment">
  <form>
    <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">
      ...
    </div>
  </form>
</div>

问题是我的#repeat 和#repeat_text 元素一直向上移动到另外两个表单元素旁边。有人知道如何正确渲染它们吗？

Answer 1

1) 在#repeat 类上添加规则clear: left;

2) 从#repeat 类中删除宽度

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

FIDDLE