我有以下HTML代码。
body {
background: lime !important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section {
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
.import-notes {
background: yellow;
}<body>
<div class="container">
<h1>Testing </h1>
<div class="mid-section">
<p>(1)This is a test </p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
我想将<p class="import-notes">设为全宽而不填充。
答案 0 :(得分：1)
一种选择是在.import-notes上添加这些：
width: calc(100% + 20px)
position: relative;
left: -10px;
或者这些，类似：
width: calc(100% + 20px);
margin-left: -10px;
或者只设置两个负边距而不是一个，这样您就不需要使用calc()：
margin-left: -10px;
margin-right: -10px;
你可以在这里看到它们：
body {
background: lime !important;
}
.mid-section {
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
.import-notes {
/* OPTION 1 */
position: relative;
left: -10px;
width: calc(100% + 20px);
/* OPTION 2 */
/* margin-left: -10px;
width: calc(100% + 20px); */
/* OPTION 3 */
/* margin-left: -10px;
margin-right: -10px; */
background: yellow;
}<body>
<div class="container">
<h1>Testing </h1>
<div class="mid-section">
<p>(1)This is a test </p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
或者，您可以从父级删除填充并将其添加到子级，这对我来说更像是一个实际的解决方案而不是解决方法。
例如，如果更改<p> <a>需要点击，会发生什么情况？您需要填充内部，而不是父级外部。否则，用户将无法在侧面点击它，因为他们将点击父母而不是。
body {
background: lime !important;
}
.mid-section {
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
.mid-section > p {
padding: 0 10px;
}
.mid-section > .import-notes {
background: yellow;
padding: 0;
}<body>
<div class="container">
<h1>Testing </h1>
<div class="mid-section">
<p>(1)This is a test </p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
答案 1 :(得分：1)
使用display:inline-block。你可以实现它。
.import-notes {
background: yellow;
display:inline-block;
}
body {
background: lime !important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section {
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
.import-notes {
background: yellow;
display:inline-block;
}<body>
<div class="container">
<h1>Testing </h1>
<div class="mid-section">
<p>(1)This is a test </p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
答案 2 :(得分：1)
您可以根据父元素为其设置负边距。
.import-notes {
background: yellow;
margin: 0 -10px; //negative margin based on parent element padding
}
另请参阅：How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?
body {
background: lime !important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section {
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
.import-notes {
background: yellow;
margin: 0 -10px;
}<body>
<div class="container">
<h1>Testing </h1>
<div class="mid-section">
<p>(1)This is a test </p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
答案 3 :(得分：0)
body { background: lime !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section {
padding:10px 0px;
background : white;
border-color : black;
border-width: 5 px;
border-style: solid;
}
.mid-section .note {
margin: 5px 10px;
}
.import-notes {
background : yellow;
margin: 0px 0px;
}<div class="container">
<h1>Testing </h1>
<div class="mid-section">
<p class='note'>(1)This is a test </p>
<p class='note'>(2)This is a test </p>
<p class='note'>(3)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
删除.mid-section中的填充，并将边距插入除p标签以外的所有p子节点，但.import-notes
除外答案 4 :(得分：0)
如果全宽表示宽度等于文字，则应再为.import-notes添加一种样式，即display: inline-block;
答案 5 :(得分：0)
<p class="import-notes">
已经有全宽，但我想你想这样：
body { background: lime !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section {
padding:0 10px;
background : white;
border-color : black;
border-width: 5 px;
border-style: solid;
}
.import-notes {
background : yellow;
margin-left:-10px;
margin-right:-10px;
}<div class="container">
<h1>Testing </h1>
<div class="mid-section">
<p>(1)This is a test </p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
答案 6 :(得分：0)
你可以将填充插入到子节点而不是父节点，如下所示：
function myFunction() {
var sheet = SpreadsheetApp.getActiveSheet();
var replace = sheet.getRange("B2").getValue();
var newValue = ""
var values = sheet.getRange("A1:A200").getValues(); //Data to change
for(var row in values){
var updatedValues = values[row].map(function(originalValue){
return originalValue.toString().replace(replace,newValue);
});
values[row] = updatedValues;
}
sheet.getRange("A1:A200").setValues(values);
}
.mid-section p:not(.import-notes) {
padding: 0 10px;
}
body {
background: lime !important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
.mid-section {
background: white;
border-color: black;
border-width: 5px;
border-style: solid;
}
.mid-section p:not(.import-notes) {
padding: 0 10px;
}
.import-notes {
background: yellow;
}