如何获取边框属性以填充具有 n 填充的 div 的 100% 宽度

【问题标题】：How to get border attribute to fill up 100% width of div having n padding如何获取边框属性以填充具有 n 填充的 div 的 100% 宽度
【发布时间】：2019-12-12 00:36:59
【问题描述】：

我制作了一个具有 25px 填充的父 div。在那个 div 中，我创建了另一个 li 标签，它有一个顶部边框，宽度为 100%，但它没有填满父 div。它停在 25 像素的内边距处。

尝试过边框框，但效果也很好。

当我将 li 元素的宽度更改为 115% 

* {
  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>

Required Output

【问题讨论】：

  • 你能在这里提供你的代码吗？
  • 这就是 padding 的工作原理...你应该放弃父级的 padding 并在标题和任何其他应该在它们周围有间距的元素上放置边距或填充，视情况而定。
  • 这是填充的默认行为。
  • 但是考虑到我需要它的很多地方，这不会太多填充标签吗？
  • @SunnyMahajan 有什么解决办法？

标签： html css


【解决方案1】：

这是填充的正常行为。您可以从父元素中删除填充并将其添加到子元素，如下所示：

* {
  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>

【讨论】：

  • 非常感谢，但我想知道为什么 padding:0 !important;也不适用于 li 标签
  • 欢迎您。如果将 padding:0 !important 添加到
  • 标签，它只会删除
  • 标签的填充，而不是父标签的填充。请记住，填充不是从父级继承的。
【解决方案2】： 
li {
    align-items: center;
    list-style: none;
    height: 50px;
    border-top: 1px solid white;
    width: auto;
    margin: 0 -20px;
    padding: 10px;
}

【讨论】：

    【解决方案3】：

    执行以下步骤

    1. 从section 类中删除填充。
    2. 为h2 和li 组件添加填充。
    3. 移除li的宽度属性，让它占据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>

    【讨论】：

      【解决方案4】： 

      * {
  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>

      【讨论】：

        【解决方案5】：

        您可以通过多种方式做到这一点，但基于您的代码，您可以通过使用负边距并删除 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>

        【讨论】：

          【解决方案6】： 
          li {
    border-top: 1px solid white;
    display: block;
    height: 50px;
    margin: 0 -20px;
    padding: 10px 10px;
}

          【讨论】：

            猜你喜欢
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode