如何让颜色 div 占据父 div .starter 的整个宽度，以便整个宽度是一种颜色？我已经尝试了一切，但没有取得进展。为了便于控制，我已将问题隔离开来。提前致谢!
<!DOCTYPE html>
<html>
<head>
<title>Pricing</title>
<link href="styles2.css" rel="stylesheet" />
</head>
<body>
</div>
<ul id="plans">
<li>
<div id='starter' class="col-4 col-m-12">
<h1>Starter</h1>
<div class="color"><h3 id="test">1 Hour</h3></div>
<p>$25</p>
</div>
</li>
</ul>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
#header{
padding:15px;
background-color:rgb(157,221,220);
margin-bottom:7px;
}
body{
background-color:white;
color:rgb(164,111,67);}
a{
text-decoration:none;
color:rgb(164,111,67);
}
#info{
padding:0;
text-align: center;
}
#pricing{
padding:30px;
}
#starter, #basic, #deluxe{
background-color:lightgray;
text-align: center;
border:5px solid white;
}
ul{
margin:0;
padding:0;
}
li{
list-style:none;
}
#test{
background-color:white;
width:100%;
}
#color{
margin:0;
background-color:white;
}
html, body{}
我希望它看起来像这样 
最佳答案
你被 parent 的填充搞砸了。将其更改为:
[class*="col-"] {
float: left;
padding: 0;;
}
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 0;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
#header{
padding:15px;
background-color:rgb(157,221,220);
margin-bottom:7px;
}
body{
background-color:white;
color:rgb(164,111,67);}
a{
text-decoration:none;
color:rgb(164,111,67);
}
#info{
padding:0;
text-align: center;
}
#pricing{
padding:30px;
}
#starter, #basic, #deluxe{
background-color:lightgray;
text-align: center;
border:5px solid white;
}
ul{
margin:0;
padding:0;
}
li{
list-style:none;
}
#test{
background-color:white;
width:100%;
}
#color{
margin:0;
background-color:white;
}
html, body{}<!DOCTYPE html>
<html>
<head>
<title>Pricing</title>
<link href="styles2.css" rel="stylesheet" />
</head>
<body>
</div>
<ul id="plans">
<li>
<div id='starter' class="col-4 col-m-12">
<h1>Starter</h1>
<div class="color"><h3 id="test">1 Hour</h3></div>
<p>$25</p>
</div>
</li>
</ul>
</body>
</html>关于javascript - 如何让div占据父div的全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40644356/