Question

我有一个水平可滚动的容器，里面有两行元素。它们绝对定位，它们之间有间距。这种结构的顶部，左侧和底部填充工作正常。但是，正确的大小并不尊重我投入的任何CSS。最右边的子元素接触容器的边缘，不允许任何空间。我需要做到这一点，而不要让这些空间模糊子元素作为向该边缘的滚动。

我知道我可以通过JavaScript实现这一目标。虽然，我宁愿在可能的情况下利用HTML / CSS。

演示：http://codepen.io/jneander/pen/ByVQMR

的JavaScript

var list = document.getElementsByClassName("list")[0];
var add = document.getElementsByClassName("add")[0];

function setPosition(li, index) {
  li.innerText = index + 1;
  li.style.top = 10 + (index % 2) * 50 + "px";
  li.style.left = 10 + Math.floor(index / 2) * 50 + "px";
}

function reorder() {
  for (var i = 0; i < list.children.length; i++) {
    setPosition(list.children[i], i);
  }
};

function addItem() {
  var count = list.children.length;
  var li = document.createElement("div");
  li.classList.add("item");
  li.innerText = count + 1;
  setPosition(li, count);
  li.onclick = function() { li.remove(); reorder() }
  list.appendChild(li);
};

add.onclick = function() {
  addItem();
};

for (var i = 0; i < 23; i++) {
  addItem();
}

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.mr-boddy {
  border: 1px dotted red;
  padding: 0;
  margin: 3rem;
  width: 500px;
  height: 110px;
  position: relative;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.list {
  height: 130px;
  width: 100%;
  padding-bottom: 15px;
  overflow-x: scroll;
  position: relative;
}

.list .item {
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: lavender;
  display: block;
}

.add {
  margin-left: 3rem;
  padding: 1rem 2rem;
  background: #9C9;
  border: none;
}

HTML 的

<div class="mr-boddy">
  <div class="container">
    <div class="list">
    </div>
  </div>
</div>

<button class="add">Add</button>

Answer 1

如果可以“切断”部分盒子，可以在外部容器中添加填充，而不是内部的盒子：

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding-right: 10px;
}

如果您希望最初的20个项目出现在容器内（不会被填充物截断），则增加.mr-boddy的宽度（例如510px）。

如何向具有绝对子项的相对容器添加填充或边距

1 个答案: