css 为什么一个浮动的子元素会阻止父元素的填充将元素向内推？

d5vmydt9  于 2023-05-19  发布在  其他
关注(0)|答案(5)|浏览(138)

bounty还有4天到期。回答此问题可获得+50声望奖励。dylosaur正在寻找这个问题的更详细的答案：我想知道为什么标签的float属性会导致外部div被填充出来，而不是内部元素被填充进去


与我所拥有的：

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

.formDiv {
  text-align: center;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="salesTax.css">
    <title>Sales Tax Calculator</title>
  </head>

  <body>
    <main>
      <div id="border">
        <h1>Sales Tax Calculator</h1>
        <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
        <form>
          <div class="formDiv">
            <label for="subtotal">Subtotal:</label>
            <input type="text" id="subtotal">
          </div>
          <div class="formDiv">
            <label for="taxRate">Tax Rate:</label>
            <input type="text" id="taxRate">
          </div>
          <div class="formDiv">
            <label for="salesTax">Sales Tax:</label>
            <input type="text" id="salesTax" disabled>
          </div>
          <div class="formDiv">
            <label for="total">Total:</label>
            <input type="text" id="total" disabled>
          </div>
          <div class="formDiv">
            <input type="button" id="calculate" value="Calculate">
            <input type="button" id="clear" value="Clear">
          </div>
        </form>
      </div>
      <script src="salesTax.js"></script>
    </main>
  </body>

</html>

据我所知，这里应用于标签的float: left导致它们尽可能多地填充#formDiv，以获得输入左侧的标签。因为我希望标签和输入更居中，所以我想我会对#border应用padding，但所做的只是向外扩展它，而不是向内推动内部元素。
为什么会这样？有没有什么我可以做的，以防止没有删除任何提供的CSS？**（我唯一可以删除的部分CSS是#border的CSS。其余部分是规范的一部分，但可以添加到。）

css

5条答案

按热度按时间
gdx19jrr

gdx19jrr1#

在您的情况下，使用<table>可能是合适的：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#border {
  border: .25em solid blue;
  padding: 20px;
  max-width: 600px;
}

#border h1 {
  color: blue;
  margin-bottom: 10px;
}

#border p {
  margin-bottom: 10px;
}

#border table {
  margin: 0 auto;
}

#border table td {
  padding-bottom: 10px;
}

#border table td:first-child {
  text-align: right;
  padding-right: 10px;
}
<main>
  <div id="border">
    <h1>Sales Tax Calculator</h1>
    <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
    <form>
      <table>
        <tr>
          <td><label for="subtotal">Subtotal:</label></td>
          <td><input type="text" id="subtotal"></td>
        </tr>
        <tr>
          <td><label for="taxRate">Tax Rate:</label></td>
          <td><input type="text" id="taxRate"></td>
        </tr>
        <tr>
          <td><label for="salesTax">Sales Tax:</label></td>
          <td><input type="text" id="salesTax" disabled></td>
        </tr>
        <tr>
          <td><label for="total">Total:</label></td>
          <td><input type="text" id="total" disabled></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="button" id="clear" value="Clear">
            <input type="button" id="calculate" value="Calculate">
          </td>
        </tr>
      </table>
    </form>
  </div>
</main>

********************🙃

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#border {
  border: .25em solid blue;
  padding: 20px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

#border h1 {
  color: blue;
  margin-bottom: 10px;
}

#border p {
  margin-bottom: 10px;
}

#border form {
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

#border form label {
  text-align: right;
}
<div id="border">
  <h1>Sales Tax Calculator</h1>
  <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  <form>
    <label for="subtotal">Subtotal:</label>
    <input type="text" id="subtotal">
    <label for="taxRate">Tax Rate:</label>
    <input type="text" id="taxRate">
    <label for="salesTax">Sales Tax:</label>
    <input type="text" id="salesTax" disabled>
    <label for="total">Total:</label>
    <input type="text" id="total" disabled>
    <span></span>
    <span>
      <input type="button" id="clear" value="Clear">
      <input type="button" id="calculate" value="Calculate">
    </span>
  </form>
</div>
赞(0）分享  回复(0）举报  2023-05-19
g0czyy6m

g0czyy6m2#

如果您可以通过#border选择器添加样式，那么您可以轻松地覆盖其他样式。
可能的示例：

div#border {
  max-width: max-content;
  padding-right: 2em;
  margin: auto;
  display: grid;/* or inline-grid */
  justify-content: center;
}

#border .formDiv {
  display: flex;
  justify-content: center;
}

#border label {
  width: auto;
  flex: 1;
}

要测试呈现的片段

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

.formDiv {
  text-align: center;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}
/* overwrite previous style if already defined */
div#border {
  max-width: max-content;
  padding-right: 2em;
  margin: auto;
  display: grid;/* or inline-grid without max-width/padding/margin */
  justify-content: center;
}

#border .formDiv {
  display: flex;
  justify-content: center;
}

#border label {
  width: auto;
  flex: 1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="salesTax.css">
  <title>Sales Tax Calculator</title>
</head>

<body>
  <main>
    <div id="border">
      <h1>Sales Tax Calculator</h1>
      <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
      <form>
        <div class="formDiv">
          <label for="subtotal">Subtotal:</label>
          <input type="text" id="subtotal">
        </div>
        <div class="formDiv">
          <label for="taxRate">Tax Rate:</label>
          <input type="text" id="taxRate">
        </div>
        <div class="formDiv">
          <label for="salesTax">Sales Tax:</label>
          <input type="text" id="salesTax" disabled>
        </div>
        <div class="formDiv">
          <label for="total">Total:</label>
          <input type="text" id="total" disabled>
        </div>
        <div class="formDiv">
          <input type="button" id="calculate" value="Calculate">
          <input type="button" id="clear" value="Clear">
        </div>
      </form>
    </div>
    <script src="salesTax.js"></script>
  </main>
</body>

</html>
赞(0）分享  回复(0）举报  2023-05-19
33qvvth1

33qvvth13#

你正在使用一些非常老式的CSS，所以老式的display: table解决方案如下：

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

.formDiv {
  text-align: center;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}

/* new CSS */

form {
  display: table;
  margin: 0 auto;
}

.formDiv {
  display: table-row;
  text-align: start;
}

label {
  width: auto;
  float: none;
  display: table-cell;
  background-color: gray;
}

.formDiv:last-child:before {
  content: "";
  display: table-cell;
}
<div id="border">
  <h1>Sales Tax Calculator</h1>
  <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  <form>
    <div class="formDiv">
      <label for="subtotal">Subtotal:</label>
      <input type="text" id="subtotal">
    </div>
    <div class="formDiv">
      <label for="taxRate">Tax Rate:</label>
      <input type="text" id="taxRate">
    </div>
    <div class="formDiv">
      <label for="salesTax">Sales Tax:</label>
      <input type="text" id="salesTax" disabled>
    </div>
    <div class="formDiv">
      <label for="total">Total:</label>
      <input type="text" id="total" disabled>
    </div>
    <div class="formDiv">
      <input type="button" id="calculate" value="Calculate">
      <input type="button" id="clear" value="Clear">
    </div>
  </form>
</div>

如果你被允许编辑HTML，然后添加一些额外的标签：

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

.formDiv {
  text-align: center;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}

/* new CSS */

form {
  display: table;
  margin: 0 auto 1em;
  border-spacing: 1em .5em;
}

form>* {
  display: table-row;
}

form>*>* {
  display: table-cell;
}

.formDiv {
  text-align: start;
  margin-bottom: 0;
}

label {
  width: auto;
  float: none;
}

input,
#calculate,
#clear {
  margin: 0;
}
<div id="border">
  <h1>Sales Tax Calculator</h1>
  <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
  <form>
    <div class="formDiv">
      <label for="subtotal">Subtotal:</label>
      <span><input type="text" id="subtotal"></span>
    </div>
    <div class="formDiv">
      <label for="taxRate">Tax Rate:</label>
      <span><input type="text" id="taxRate"></span>
    </div>
    <div class="formDiv">
      <label for="salesTax">Sales Tax:</label>
      <span><input type="text" id="salesTax" disabled></span>
    </div>
    <div class="formDiv">
      <label for="total">Total:</label>
      <span><input type="text" id="total" disabled></span>
    </div>
    <div class="formDiv">
      <span></span>
      <span><input type="button" id="calculate" value="Calculate"><input type="button" id="clear" value="Clear"></span>
    </div>
  </form>
</div>
赞(0）分享  回复(0）举报  2023-05-19
e1xvtsh3

e1xvtsh34#

填充不能“推入”已经处于最小宽度的内容。display: inline-block导致<div id="border">不宽于其内容。因此，padding-right增加了<div id="border">的宽度。
“推入”内部元件的唯一方法将是减小那些元件的宽度。

赞(0）分享  回复(0）举报  2023-05-19
6ie5vjzr

6ie5vjzr5#

如果我正确地理解了这个问题，然后加上：

display: flex;
justify-content: center;

到 Package 输入（按钮）的div应该会达到你想要的结果：

h1 {
  color: blue;
  padding-left: .75em;
}

p {
  padding-left: 1.50em;
}

div {
  margin-bottom: 0.5em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
}

#border {
  border: .25em solid blue;
  display: inline-block;
}

#calculate,
#clear {
  margin-bottom: 1em;
}

.btns {
  display: flex;
  justify-content: center;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="salesTax.css">
  <title>Sales Tax Calculator</title>
</head>

<body>
  <main>
    <div id="border">
      <h1>Sales Tax Calculator</h1>
      <p>Enter Subtotal and Tax Rate and click "Calculate".</p>
      <form>
        <div id="formDiv">
          <label for="subtotal">Subtotal:</label>
          <input type="text" id="subtotal">
        </div>
        <div id="formDiv">
          <label for="taxRate">Tax Rate:</label>
          <input type="text" id="taxRate">
        </div>
        <div id="formDiv">
          <label for="salesTax">Sales Tax:</label>
          <input type="text" id="salesTax" disabled>
        </div>
        <div id="formDiv">
          <label for="total">Total:</label>
          <input type="text" id="total" disabled>
        </div>
        <div id="formDiv" class="btns">
          <input type="button" id="calculate" value="Calculate">
          <input type="button" id="clear" value="Clear">
        </div>
      </form>
    </div>
    <script src="salesTax.js"></script>
  </main>
</body>

</html>
赞(0）分享  回复(0）举报  2023-05-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com