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

问题描述 投票：0回答：5

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>

据我所知，此处应用于标签的 

float: left
使它们尽可能多地填充 
#formDiv
以使标签位于输入的左侧。因为我希望标签和输入更加居中，所以我想我会对
#border
应用填充，但所做的只是向外扩展而不是向内推动内部元素。

为什么会这样？ 在不删除任何提供的 CSS 的情况下，我能做些什么来防止这种情况发生吗？ （我唯一可以删除部分的 CSS 是 #border

 的 CSS。其余部分是规格，但可以添加到。）

html css css-float padding
5个回答
0
投票
在您的情况下，使用

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

              
            

          

        

        
如果您可以通过
#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
投票

              
            

          

        

        
你正在使用一些非常老式的 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
投票

              
            

          

        

        
Padding 不能“推入”已经处于最小宽度的内容。 
display: inline-block
 导致 
<div id="border">
 不比其内容宽。因此，
padding-right
增加了
<div id="border">
的宽度。


“推入”内部元素的唯一方法是减少这些元素的宽度。

    



      

      
      
      

      

        

          

            

              
-1
投票

              
            

          

        

        
如果我正确理解问题，然后添加：


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>





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.