Question

我已经定义了一个简单的表格来了解清楚。我很惊讶“提交”＃39;按钮不会进入下一行。我对clear的理解：两者都是在应用clear的元素的左侧或右侧不应该有浮动元素。鉴于这个定义，我期待提交移动最后一行，因为我已经将clear应用于输入和标签。

有人可以解释为什么这不起作用？请注意我的目标是了解我的理解存在缺陷，而不是如何将“提交”按钮带到下一行

＆＃13;

label {
  color: blue;
  float: left;
  margin-right: 2px;
  clear: left;
  width: 3em;
}

input {
  border: 2px black solid;
  float: left;
  width: 10em;
}

button {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<form action="#">
  <fieldset>
    <label>Name </label>
    <input type="text" value="Enter name" />

    <label>Phone </label>
    <input type="text" value="Enter phone" />

    <button type="button">Submit </button>
  </fieldset>
</form>

＆＃13;

Answer 1

9.5.2 Controlling flow next to floats: the 'clear' property

适用于：块级元素

Button，默认情况下是内联级别元素，而不是块级元素。要使clear适用，请将其display:block;

label {

    color: blue;
    float: left;
    margin-right: 2px;
    clear: left;
    width: 3em;
}

input {

    border: 2px black solid;
    float: left;
    width: 10em;
}

button {
    display:block;
    clear: both;
    margin-left: auto;
    margin-right: auto;
}

<form action="#">
        <fieldset>
                <label>Name </label>
                <input type="text" value="Enter name"/>
                <label>Phone </label>
                <input type="text" value="Enter phone"/>
                <button type="button">Submit </button>
       </fieldset>
</form>

CSS清晰理解

1 个答案: