如何使元素的宽度:100% 减去填充?

假设为输入设置了 padding: 50px 10px;，并希望它是父 div 宽度 的100%。使用 width: 100%; 不起作用。为了修复此问题，我们可以将输入放入一个带有 position: relative 和固定高度的 div 中。这会将元素的宽度设置为100% 减去填充。

我们已将 position 设置为 relative，高度已固定 −

.container {
   position: relative;
   height: 30px;
}

输入的 position 已设置为 absolute −

content {
   position: absolute;
   left: 0;
   right: 0;
   padding: 3px 10px;
}

示例

让我们看看一个完整的示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         border: thin solid orange;
      }
      .container {
         position: relative;
         height: 30px;
      }
      .content {
         position: absolute;
         left: 0;
         right: 0;
         padding: 3px 10px;
      }
   </style>
</head>
<body>
   <h1>Fix</h1>
   <div class="demo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div class="container">
         <input class="content" type="text" />
      </div>
      Nunc auctor efficitur sapien, luctus faucibus mi dictum nec.
   </div>
</body>
</html>

输出

更新日期： 01-Nov-2022

2K+ 查看数

开启您的 事业

完成课程后获得认证

开始
广告