欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

為什么一個浮動的子元素會阻止父元素& # 39；向內推動元素的填充？

CSS
張吉惟1年前8瀏覽0評論

What I want與我擁有的相比:

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>

填充不能& quot推入& quot已經達到最小寬度的內容。顯示:內嵌塊原因& ltdiv id = & quotborder & quot& gt不超過其內容的寬度。因此，右填充增加了& ltdiv id = & quotborder & quot& gt。

通往& quot推入& quot內部元素將減少這些元素的寬度。

很可能，在您的情況下，使用& lt表& gt將是合適的:

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

如果您可以通過#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>

如果我正確理解了這個問題，那么補充一句:

display: flex;
justify-content: center;

包裝輸入(按鈕)的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>