Question

我拿到了容器，宽度是页面的一半。该容器包括多个项目集合（行）。每行包含大量项目。您只能看到有限数量的项目，其他项目可以通过水平滚动来发现。

请参阅下面的摘录。

.container {
  width: 50%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.items {
  height: 100px;
  background: #ccc;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 30%;
  height: 50px;
  background: #efc;
  border: 1px solid;
}

.shadow {
  outline: none;
  border: 2px solid #3a53ed;
  box-shadow: 0 0 10px #9ecaed;
}

<div class="container">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="items shadow">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

我有shadow类，它为元素添加明亮的边框和阴影。我希望能够将该类应用于任何项目集合（行）。我的意思是，不仅是为了可见的部分，而且是为了整体。

问题是行元素的宽度等于可见部分。如何使宽度等于完整的长宽度（基于所有项目的宽度）？

更新：布局（主要是）和滚动行为应该保持不变

谢谢。

Answer 1

我想你不喜欢它。

.container {
  width: 50%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.items {
  height: 100px;
  background: #ccc;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 30%;
  height: 50px;
  background: #efc;
  border: 1px solid;
}

.shadow {
  outline: none;
  border: 2px solid #3a53ed;
  box-shadow: 0 0 10px #9ecaed;
}

   

 <div class="container">
   <div class="items">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>
<div class="items shadow">
   <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>

Answer 2

实际的默认行为是错误的，我会假设它会像你想要的那样起作用。

无论如何，我不认为没有javascript它是可行的，但我可能是错的。原因是您的item属于width: 30%，因此如果您更改了width items以获得适当的边框，则item的宽度将会{也改变了..看看我在哪里？

在items上设置阴影类是不行的，因为即使我们更改了它的宽度，它也会改变包含item的宽度，所以我们必须把它放在其他地方。 / LI>

-

.shadow{
   box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  outline: none;
  border: 2px solid #3a53ed;
  box-shadow: 0 0 10px #9ecaed;
}

因此，如果不这样做，我们将如何给阴影提供正确的宽度？我不认为没有js就可以。

使用一些javascript，您可以获取容器的宽度并将其应用于“阴影”div。

let ctnr = document.querySelector(".container");
let width = ctnr.scrollWidth;
let sel = document.querySelectorAll(".shadow");

sel.forEach( s => {
    s.style.width = width + "px";
});

.container {
  width: 50%;
  overflow-x: auto;
  overflow-y: hidden;
  background: #ccc;
}

.items {
  height: 100px;
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 30%;
  height: 50px;
  background: #efc;
  border: 1px solid;
}
.outer{
  }
.sel{
  position: relative;
}
.shadow{
   box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  outline: none;
  border: 2px solid #3a53ed;
  box-shadow: 0 0 10px #9ecaed;
}

<div class="container">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  
  <div class="items sel">
    <div class="shadow"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

将可滚动元素的宽度设置为完整值（可见+不可见部分）

2 个答案: