英文:
Why does a floating child element prevent the parent's padding from pushing elements inwards?
问题
It seems you'd like a translation of the code portion in your message. Here's the translated code:
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>
Please note that this is a direct translation, and if you have any specific questions about the code or its functionality, feel free to ask.
英文:
vs. what I have:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
As far as I can tell, the float: left applied to the labels here is causing them to fill up as much of #formDiv as possible to get the labels to the left of the inputs. Since I want the labels and inputs to be more centered, I thought I would apply padding to the #border, but all that does is expand it outward rather than pushing the inner elements inwards.
Why is that? Is there anything I can do to prevent that without removing any of the provided CSS? (The only CSS I can delete parts of is the CSS for #border. The rest is part of the specification, but can be added onto.)
答案1
得分: 1
Padding不能“推进”已经达到最小宽度的内容。 display: inline-block 使 <div id="border"> 的宽度不会超过其内容。因此，padding-right 增加了 <div id="border"> 的宽度。
唯一的方法来“推进”内部元素是减小这些元素的宽度。
英文:
Padding cannot "push in" the contents that are already at the minimum width. display: inline-block causes <div id="border"> to be no wider than its contents. Therefore, padding-right increases the width of <div id="border">.
The only way to "push in" the inner elements would be to reduce the width of those elements.
答案2
得分: 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>
<!-- ... (其他表格行) ... -->
</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">
<!-- ... (其他表单元素) ... -->
</form>
</div>
英文:
Probably, in your case, the use of a <table> will be appropriate:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Update. If you have a phobia of tables 🙃:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案3
得分: 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;
}
用于测试渲染的片段：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
/* 如果已经定义了前一个样式，请覆盖它 */
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
英文:
If you can add style via the #border selector, then you can easily overwrite other styles.
Possible example :
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;
}
snippet to test render
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案4
得分: -1
如果我理解问题正确，那么向包裹输入（按钮）的 div 添加以下内容应该可以实现您想要的结果：
display: flex;
justify-content: center;
<div class="btns">
<input type="button" id="calculate" value="Calculate">
<input type="button" id="clear" value="Clear">
</div>
英文:
If I understand the question properly, then adding:
display: flex;
justify-content: center;
to the div that wraps the inputs (buttons) should achieve the result you're looking for:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论