[英]CSS how to delete white space from right, left part and bottom
我有一些滑块代码。 一切正常。 但是我需要删除页面的指针和右侧(或左侧)之间的左右两个部分的空白。
[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>
我已经尝试了不同的填充,边距,但没有解决。 谁能帮我?
如果我正确理解了您的问题(我想您只是想删除边距),则必须使用scroll
类向元素添加以下属性:
right: 0;
left: 0;
这意味着您的代码段的第一块将如下所示:
[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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.