CSS如何从右侧，左侧部分和底部删除空白区域

I have some code of slider. All work right. But I need delete the white space from both (right and left) parts between pointer and right (or left) side of the page.

我有一些滑块代码。一切正常。但是我需要从指针和页面右侧(或左侧)之间的两个(右侧和左侧)部分删除空白区域。

[class^="scroll"] {
 position: absolute;
 top: 62%;
 height: 38%;
 line-height: 10em;
 padding: 0 3em;
}
[class^="scroll"] input {
 display: none;
}
[class^="scroll"] div {
 height: 100%;
 overflow: hidden;
 white-space: nowrap;
 word-wrap: normal;
 font-size: 0;
}
[class^="scroll"] img {
 position: relative;
 right: 0em;
 width: 15.5%;
 height: 100%;
 transition: .5s;
}

[class^="scroll"] label {
 cursor: pointer;
 font-weight: 600;
 font-size: 3em;
}
[class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(6):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(7):after {
 content: "\3009";
 position: absolute;
 right: 0;
}
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(1):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(6):after {
 content: "\3008";
 position: absolute;
 left: 0;
}

[class^="scroll"] input:nth-of-type(2):checked ~ div img {right: 25%;}
[class^="scroll"] input:nth-of-type(3):checked ~ div img {right: 50%;}
[class^="scroll"] input:nth-of-type(4):checked ~ div img {right: 75%;}
[class^="scroll"] input:nth-of-type(5):checked ~ div img {right: 100%;}
[class^="scroll"] input:nth-of-type(6):checked ~ div img {right: 125%;}
[class^="scroll"] input:nth-of-type(7):checked ~ div img {right: 150%;}

<div class="scroll">
    <input type="radio" id="l0" name="raz" checked="checked"/>
    <input type="radio" id="l1" name="raz"/>
    <input type="radio" id="l2" name="raz"/>
    <input type="radio" id="l3" name="raz"/>
    <input type="radio" id="l4" name="raz"/>
    <input type="radio" id="l5" name="raz"/>
    <input type="radio" id="l6" name="raz"/>

    <label for="l0"></label>
    <label for="l1"></label>
    <label for="l2"></label>
    <label for="l3"></label>
    <label for="l4"></label>
    <label for="l5"></label>
    <label for="l6"></label>

    <div>
        <img src="1.jpg" alt=""/>
        <img src="2.jpg" alt=""/>
        <img src="3.jpg" alt=""/>
        <img src="4.jpg" alt=""/>
        <img src="5.jpg" alt=""/>
        <img src="6.jpg" alt=""/>
        <img src="7.jpg" alt=""/>
        <img src="8.jpg" alt=""/>

        <img src="10.jpg" alt=""/>
        <img src="9.jpg" alt=""/>
        <img src="11.jpg" alt=""/>
        <img src="12.jpg" alt=""/>
        <img src="13.jpg" alt=""/>
        <img src="20.jpg" alt=""/>
        <img src="21.jpg" alt=""/>
        <img src="23.jpg" alt=""/>
    </div>
</div>

I already try different paddings, margins and don`t resolve. Can anyone help me?

我已经尝试了不同的填充,边距和不解决。谁能帮我?

1 个解决方案

#1

If I understood your question correctly (I think you just want to remove the side spacings) you have to add following attributes to the element with the scroll class:

如果我正确地理解了你的问题(我认为你只想删除边间距),你必须使用scroll类向元素添加以下属性:

right: 0; 
left: 0;

This would mean that the first block of your snippet will look like this:

这意味着您的代码段的第一个块将如下所示:

[class^="scroll"] {
  position: absolute;
  top: 62%;
  right: 0; // tell the absolute element to have 0 space on the right
  left: 0; // tell the absolute element to have 0 space on the left

  height: 38%;
  line-height: 10em;
  padding: 0 3em;
}

#1