Question

这是<body>代码的内容。

<div id="border">
    <p><h1 style="text-align: center;">Welcome to ABC Airline!</h1></p>
        <table caption="Choose your seat preference"
            style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
            <tr>
                <td><p id="dd">Window Side<input type="radio" name="side"/></p></td>
                <td><p id="dd">Front of plane<input type="radio" name="frontorback"/></p></td>
            </tr>
            <tr>
                <td><p id="dd">Aisle Side<input type="radio" name="side"/></p></td>
                <td><p id="dd">Middle of plane<input type="radio" name="frontorback"/></p></td>
            </tr>
            <tr>
                <td><p id="dd">Center Seat<input type="radio" name="side"/></p></td>
                <td><p id="dd">Back of plane<input type="radio" name="frontorback"/></p></td>
            </tr>
        </table>
    <p><input type="submit" value="next" style="float: right;"></p>
</div>

样式的定义如下：

#border{
    border: 2px solid black;
    border-radius: 25px;
    width: 50%;
    margin: auto;
    background-color: #ffc;
}
#dd{
    margin: 0.2em 0.2em 0.2em 0.2em;
}

而且，这是使用Chrome在macOS中运行的结果。

按钮位于我想要的右侧，但是它不在div块中。当style="float: right;"未定义时，它没有对齐到右边但是在边框中。

我想把它放在边境内。我该怎么办？

Answer 1

给予overflow: hidden修正。这是因为clearfix。这是您正在寻找的解决方案：

#border {
  overflow: hidden;
  padding-bottom: 10px;
}

我给了一个额外的底部衬垫以方便整个按钮，而不是切割它。你甚至可以给按钮margin-right以使其脱离边界。

<强>段

＆＃13;

#border {
  border: 2px solid black;
  border-radius: 25px;
  width: 50%;
  margin: auto;
  background-color: #ffc;
  overflow: hidden;
  padding-bottom: 10px;
}
#dd {
  margin: 0.2em 0.2em 0.2em 0.2em;
}

＆＃13;

<div id="border">
  <p>
    <h1 style="text-align: center;">Welcome to ABC Airline!</h1>
  </p>
  <table caption="Choose your seat preference" style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
    <tr>
      <td>
        <p id="dd">Window Side
          <input type="radio" name="side" />
        </p>
      </td>
      <td>
        <p id="dd">Front of plane
          <input type="radio" name="frontorback" />
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p id="dd">Aisle Side
          <input type="radio" name="side" />
        </p>
      </td>
      <td>
        <p id="dd">Middle of plane
          <input type="radio" name="frontorback" />
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p id="dd">Center Seat
          <input type="radio" name="side" />
        </p>
      </td>
      <td>
        <p id="dd">Back of plane
          <input type="radio" name="frontorback" />
        </p>
      </td>
    </tr>
  </table>
  <p>
    <input type="submit" value="next" style="float: right;">
  </p>
</div>

＆＃13;

预览

Answer 2

简单的答案是“使用溢出自动强制BFC＆＃39;”，如下所示：

overflow: auto;

来源：Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

<input>>离开<div>块，'float：right;'样式

2 个答案: