Question

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

我希望它像这样呈现：

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

其中[]应该显示一个复选框，[input]应该说明输入字段og类型文本。

下面是我的html和css：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 1

1）在#repeat类

上添加规则clear: left;

2）从#repeat类中删除宽度

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

<强> FIDDLE

Answer 2

实现此布局的一种方法是将每对label和input标记包装在p标记中。

如果你这样做，CSS中不需要修改。

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

<div id="dialog-form" title="Create new appointment">
  <form>
    <p><label class="align" for="title">Title</label>
    <input class="align" type="text" name="title" id="title"></p>
    
    <p><label class="align" for="when">When</label>
    <input class="align" type="text" name="when" id="when"></p>

    <p><input id="repeat" type="checkbox">
    <label for="repeat">Repeat...</label></p>
    <div id="repeat_properties">
      ...
    </div>
  </form>
</div>

Answer 3

您可以单独使用浮点数来实现布局，如下所示：

input,
label {
  float: left;
}
.align {
  clear: left;
  width: 30%;
  text-align: left;
}
#repeat {
  clear: left;
}

<div id="dialog-form" title="Create new appointment">
  <form>
    <label for="title" class="align">Title</label>
    <input type="text" id="title" name="title">
    <label for="when" class="align">When</label>
    <input type="text" id="when" name="when">
    <input type="checkbox" id="repeat">
    <label for="repeat">Repeat...</label>
    <div id="repeat_properties">
      ...
    </div>
  </form>
</div>

对齐表单元素

3 个答案: