Question

我有一个有水平填充的容器。在这个容器中是一个选择列表，我希望它是容器的整个宽度，就像没有应用填充一样。我可以用负边距做到这一点吗？

我无法移除容器的填充，因为其中有许多其他元素，并且出于各种原因我不想对每个元素应用边距。我根本无法更改HTML。

如果我应用负边距，则选择列表会向左移动，但不会加宽。我确定应用于容器内div的负边距表现不同。

<div>
  <p>Other content up here</p>
  <p>Other content up here</p>
  <p>Other content up here</p>
  <p>Other content up here</p>

  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

div {
  background: grey;
  padding: 25px;
  width: 20%;
  margin: auto;
}

select {
  width: 100%;
  1margin-left: -25px;
  margin-right: -25px;
  display: block;
}

Answer 1

这可能就是你所需要的：

div {
  background: grey;
  padding: 25px;
  width: 20%;
  margin: auto;
}

select {
  width: calc(100% + 50px);  /* 50px because padding is 25px left and 25px right*/
  margin-left: -25px;
  display: block;
}

Demo

Answer 2

如果我理解正确的话。

更新了您的代码：

   div {
  background: grey;
  padding: 25px;
  width: 20%;
  margin: auto;
}

select {
  margin-left: -6%;
  width: 112%;
   display: block;
}

Demo

Answer 3

我能看到的唯一解决方案是绝对定位选择并将left和right设置为0.

使用width: 120%和负边距最初有效，但如果那就是您需要的，则不是响应式解决方案。

Demo

使选择列表比容器更宽？

3 个答案: