我用25px的填充物创建了一个父div。在该div中,我创建了另一个带边框顶部的li标记,宽度为100%,但没有填满父div。它在25px的填充处停止。
尝试过边框,但这种方法也可以。
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
font-family: Helvetica;
}
.dark {
background-color: #17202A;
}
section {
background-color: #1C2733;
width: 500px;
height: 300px;
border-radius: 25px;
padding: 20px;
color: white;
}
h1 {
font-size: 23px;
font-weight: 800;
letter-spacing: -0.2px;
}
ul {
margin-top: 20px;
width: 100%;
}
li {
padding-top: 10px;
padding-bottom: 10px;
align-items: center;
list-style: none;
height: 50px;
border-top: 1px solid white;
width: 115%;
margin: auto;
}
<section>
<h1>Who to follow</h1>
<ul>
<li>dsdfd</li>
<li>sdfsdf</li>
<li>sdfsdf</li>
</ul>
</section>
答案 0 :(得分:3)
这是填充的正常行为。您可以从父元素中删除填充,然后将其添加到子元素中:
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
font-family: Helvetica;
}
.dark {
background-color: #17202A;
}
section {
background-color: #1C2733;
width: 500px;
height: 300px;
border-radius: 25px;
padding: 0;
color: white;
}
h1 {
font-size: 23px;
font-weight: 800;
padding: 20px 20px 0;
letter-spacing: -0.2px;
}
ul {
margin-top: 20px;
width: 100%;
}
li {
padding: 10px 20px;
align-items: center;
list-style: none;
height: 50px;
border-top: 1px solid white;
width: 100%;
margin: auto;
}
<section>
<h1>Who to follow</h1>
<ul>
<li>dsdfd</li>
<li>sdfsdf</li>
<li>sdfsdf</li>
</ul>
</section>
答案 1 :(得分:0)
li {
align-items: center;
list-style: none;
height: 50px;
border-top: 1px solid white;
width: auto;
margin: 0 -20px;
padding: 10px;
}
答案 2 :(得分:0)
执行以下步骤
section
类中删除填充。 h2
和li
组件中添加填充。li
的width属性,让它采用100%的宽度
默认
*{
padding:0;
margin:0;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
font-family:Helvetica;
}
.dark{
background-color: #17202A;
}
section{
background-color:#1C2733;
width:500px;
height:300px;
border-radius:25px;
color:white;
}
h1{
font-size:23px;
font-weight:800;
letter-spacing:-0.2px;
padding: 20px;
}
ul{
margin-top:20px;
width:100%;
}
li{
padding-top:10px;
padding-bottom:10px;
align-items:center;
list-style:none;
height:50px;
border-top: 1px solid white;
margin:auto;
padding: 20px;
}
<body class="dark">
<section>
<h1>Who to follow</h1>
<ul>
<li>dsdfd</li>
<li>sdfsdf</li>
<li>sdfsdf</li>
</ul>
</section>
</body>
答案 3 :(得分:0)
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
font-family: Helvetica;
}
.dark {
background-color: #17202A;
}
section {
background-color: #1C2733;
width: 500px;
height: 300px;
border-radius: 25px;
padding: 0;
color: white;
}
h1 {
font-size: 23px;
font-weight: 800;
padding: 20px 20px 0;
letter-spacing: -0.2px;
}
ul {
margin-top: 20px;
width: 100%;
}
li {
padding: 10px 20px;
align-items: center;
list-style: none;
height: 50px;
border-top: 1px solid white;
width: 100%;
margin: auto;
}
<section>
<h1>Who to follow</h1>
<ul>
<li>dsdfd</li>
<li>sdfsdf</li>
<li>sdfsdf</li>
</ul>
</section>
答案 4 :(得分:0)
您可以执行多种方法,但是根据您的代码,可以使用负边距并删除width
属性来轻松实现此目的:
* {
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
font-family: Helvetica;
}
.dark {
background-color: #17202A;
}
section {
background-color: #1C2733;
width: 500px;
height: 300px;
border-radius: 25px;
padding: 20px;
color: white;
}
h1 {
font-size: 23px;
font-weight: 800;
letter-spacing: -0.2px;
}
ul {
margin-top: 20px;
width: 100%;
}
li {
align-items: center;
list-style: none;
height: 50px;
border-top: 1px solid white;
padding:10px 20px;
margin: auto;
margin-left:-20px; /* value equivalent of `padding` left side applied parent container */
margin-right:-20px; /* value equivalent of `padding` right side applied parent container */
}
<section>
<h1>Who to follow</h1>
<ul>
<li>dsdfd</li>
<li>sdfsdf</li>
<li>sdfsdf</li>
</ul>
</section>
答案 5 :(得分:0)
li {
border-top: 1px solid white;
display: block;
height: 50px;
margin: 0 -20px;
padding: 10px 10px;
}