修改两个div之间的差距 [英] Modify the gap between two divs

问题描述

我只是注意到这个关于项目滑杆的惊人文章来自codrops的文章：演示可在这里演示文章如何创建一个简单的多项目滑动条

我想在我的网站上实现同样的事情，只是做一些改动。

这些项目的显示由三个电源文件组成：

HTML

 < div class =container> < header> < h1>简单多项目滑块< span>具有CSS动画的类别滑杆< / span>< / h1> < / header> < div class =main> < div id =mi-sliderclass =mi-slider> < ul> < li>< a href =＃>< img src =images / 1.jpgalt =img01>< h4> Boots< / h4>< / a& li> < li>< a href =＃>< img src =images / 2.jpgalt =img02>< h4> Oxfords< / h4>< / a& li> < li>< a href =＃>< img src =images / 3.jpgalt =img03>< h4>< / h4>< / a& li> < li>< a href =＃>< img src =images / 4.jpgalt =img04>< h4>运动鞋< / h4>< / a& li> < / ul> < ul> < li>< a href =＃>< img src =images / 5.jpgalt =img05>< h4> Belts< / h4>< / a& li> < li>< a href =＃>< img src =images / 6.jpgalt =img06>< h4& Caps< / h4>< / a>< / li> < li>< / h4>< / a>< / h4>< / h4>< li> < li>< a href =＃>< img src =images / 8.jpgalt =img08>< h4> Scarves< / h4>< / a> li> < / ul> < ul> < li>< a href =＃>< img src =images / 9.jpgalt =img09>< h4> Casual< / h4>< / a& li> < li>< a href =＃>< img src =images / 10.jpgalt =img10>< h4>豪华< / h4>< / a& li> < li>< a href =＃>< img src =images / 11.jpgalt =img11>< h4> Sport< / h4>< / a& li> < / ul> < ul> < li>< a href =＃>< img src =images / 12.jpgalt =img12>< h4> Carry-Ons< / h4>< / a> ; / li> < li>< a href =＃>< img src =images / 13.jpgalt =img13>< h4> Duffel Bags< / h4& / li> < li>< a href =＃>< img src =images / 14.jpgalt =img14>< h4>笔记本电脑包< / h4>< / a& / li> < li>< a href =＃>< img src =images / 15.jpgalt =img15>< h4>公事包< / h4>< / a& li> < / ul> < nav> < a href =＃>鞋< / a> < a href =＃>附件< / a> < a href =＃>手表< / a> < a href =＃>包< / a> < / nav> < / div> < / div> < / div>< /  -  / container  - >  

第一个CSS文件（demo.css）

  / *一般演示样式* / @ import url（http://fonts.googleapis.com/css?family=Lato:400,700,900）; html {height： 100％; } *，*：after，*：before {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box; padding：0; margin：0;} / * Clearfix hack by Nicolas Gallagher：http://nicolasgallagher.com/micro-clearfix-hack/ *。。clearfix：before，.clearfix：after {content：; display：table;}。clearfix：after {clear：both;} clearfix {* zoom：1;} body {font-family：'Lato'，Calibri，Ari​​al，sans-serif; background：#fff; font-weight：400; font-size：15px;颜色：＃333; overflow：scroll; overflow-x：hidden;} a {color：＃555; text-decoration：none;}。container {width：100％; position：relative;}。container> header {width：90％; max-width：1240px; margin：0 auto;位置：相对; padding：30px;}。main {padding-bottom：80px;}。container> header h1 {font-size：34px; line-height：38px; margin：0; font-weight：700;颜色：＃333; float：left;}。container> header h1 span {display：block; font-size：20px; line-height：26px; font-weight：300;} / *头样式* /。codrops-top {line-height：24px; font-size：11px; background：#fff; background：rgba（255，255，255，0.5）; text-transform：uppercase; z指数：9999;位置：相对; box-shadow：1px 0px 2px rgba（0,0,0,0.2）;}。codrops-top a {padding：0px 10px; letter-spacing：1px;颜色：＃333; display：inline-block;}。codrops-top a：hover {background：rgba（255,255,255,0.8）; color：＃000;}。codrops-top span.right {float：right;}。codrops-top span.right a {float：left; display：block;} / * Demo Buttons Style * /。codrops-demos {float：right; padding-top：10px;}。codrops-demos a {display：inline-block; margin：10px;颜色：＃666; font-weight：700; line-height：30px; border-bottom：4px solid transparent;}。codrops-demos a：hover {color：＃000; border-color：＃000;}。codrops-demos a.current-demo，.codrops-demos a.current-demo：hover {color：#aaa; border-color：#aaa;}  

.css）

  @import url（'demo.css'）;. mi-slider {position：relative; margin-top：30px; height：490px;}。mi-slider ul {list-style-type：none; position：absolute; width：100％; left：0; bottom：140px; overflow：hidden; text-align：center; pointer-events：none;}。no-js .mi-slider ul {position：relative; left：auto; bottom：auto; margin：0; overflow：visible;}。mi-slider ul.mi-current {pointer-events：auto;}。mi-slider ul li {display：inline-block; padding：20px; width：20％; max-width：300px; -webkit-transform：translateX（600％）; transform：translateX（600％）; -webkit-transition：opacity 0.2s linear; transition：opacity 0.2s linear;}。no-js .mi-slider ul li {-webkit-transform：translateX（0）; transform：translateX（0）;}。mi-slider ul li a，.mi-slider ul li img {display：block; margin：0 auto;}。mi-slider ul li a {outline：none; cursor：pointer;}。mi-slider ul li img {max-width：100％; border：none;}。mi-slider ul li h4 {display：inline-block; font-family：Baskerville，Baskerville Old Face，Hoefler Text，Garamond，Times New Roman，serif; font-style：italic; font-weight：400; font-size：18px; padding：20px 10px 0;}。mi-slider ul li：hover {opacity：0.7;} .mi-slider nav {position：relative; top：400px; text-align：center; max-width：800px; margin：0 auto; border-top：5px solid＃333;}。no-js nav {display：none;}。mi-slider nav a {display：inline-block; text-transform：uppercase; letter-spacing：5px; padding：40px 30px 30px 34px;位置：相对;颜色：＃888;大纲：无; -webkit-过渡：颜色0.2s线性; transition：color 0.2s linear;}。mi-slider nav a：hover，.mi-slider nav a.mi-selected {color：＃000;}。mi-slider nav a.mi-selected：after， slider nav a.mi-selected：before {content：''; position：absolute; top：-5px;边框：实心透明; height：0; width：0; position：absolute; pointer-events：none;}。mi-slider nav a.mi-selected：after {border-color：transparent; border-top-color：#fff; border-width：20px;左：50％; margin-left：-20px;}。mi-slider nav a.mi-selected：before {border-color：transparent; border-top-color：＃333; border-width：27px;左：50％; margin-left：-27px;} / *移动类和动画* /。mi-slider ul：first-child li，.no-js .mi-slider ul li {-webkit- animation：scaleUp 350ms ease-in-out都; animation：scaleUp 350ms ease-in-out both;} @  -  webkit-keyframes scaleUp {0％{-webkit-transform：translateX（0）scale（0）; } 100％{-webkit-transform：translateX（0）scale（1）; }} @ keyframes scaleUp {0％{-webkit-transform：translateX（0）scale（0）; transform：translateX（0）scale（0）; } 100％{-webkit-transform：translateX（0）scale（1）; transform：translateX（0）scale（1）; }}。mi-slider ul：first-child li：first-child {-webkit-animation-delay：90ms; animation-delay：90ms;}。mi-slider ul：first-child li：nth-​​child（2）{-webkit-animation-delay：180ms; animation-delay：180ms;}。mi-slider ul：first-child li：nth-​​child（3）{-webkit-animation-delay：270ms; animation-delay：270ms;}。mi-slider ul：first-child li：nth-​​child（4）{-webkit-animation-delay：360ms; animation-delay：360ms;} / * moveFromRight * /。mi-slider ul.mi-moveFromRight li {-webkit-animation：moveFromRight 350ms ease-in-out both;动画：moveFromRight 350ms ease-in-out both;} / * moveFromLeft * /。mi-slider ul.mi-moveFromLeft li {-webkit-animation：moveFromLeft 350ms ease-in-out both;动画：moveFromLeft 350ms ease-in-out both;} / * moveToRight * /。mi-slider ul.mi-moveToRight li {-webkit-animation：moveToRight 350ms ease-in-out both;动画：moveToRight 350ms缓入输出;} / * moveToLeft * /。mi-slider ul.mi-moveToLeft li {-webkit-animation：moveToLeft 350ms ease-in-out both;动画：moveToLeft 350msms入;} / *动画延迟* /。mi-slider ul.mi-moveToLeft li：first-child，.mi-slider ul.mi-moveFromRight li：first-child，.mi -slider ul.mi-moveToRight li：nth-​​child（4）,. mi-slider ul.mi-moveFromLeft li：nth-​​child（4）{-webkit-animation-delay：0ms; animation-delay：0ms;}。mi-slider ul.mi-moveToLeft li：nth-​​child（2），。mi-slider ul.mi-moveFromRight li：nth-​​child -moveToRight li：nth-​​child（3）,. mi-slider ul.mi-moveFromLeft li：nth-​​child（3）{-webkit-animation-delay：90ms; animation-delay：90ms;}。mi-slider ul.mi-moveToLeft li：nth-​​child（3），。mi-slider ul.mi-moveFromRight li：nth-​​child -moveToRight li：nth-​​child（2）,. mi-slider ul.mi-moveFromLeft li：nth-​​child（2）{-webkit-animation-delay：180ms; animation-delay：180ms;}。mi-slider ul.mi-moveToLeft li：nth-​​child（4），。mi-slider ul.mi-moveFromRight li：nth-​​child -moveToRight li：first-child，.mi-slider ul.mi-moveFromLeft li：first-child {-webkit-animation-delay：270ms; animation-delay：270ms;} / *动画* / @  -  webkit-keyframes moveFromRight {0％{-webkit-transform：translateX（600％）; } 100％{-webkit-transform：translateX（0％）; }} @  -  webkit-keyframes moveFromLeft {0％{-webkit-transform：translateX（-600％）; } 100％{-webkit-transform：translateX（0％）; }} @  -  webkit-keyframes moveToRight {0％{-webkit-transform：translateX（0％）; } 100％{-webkit-transform：translateX（600％）; }} @  -  webkit-keyframes moveToLeft {0％{-webkit-transform：translateX（0％）; } 100％{-webkit-transform：translateX（-600％）; }} @ keyframes moveFromRight {0％{-webkit-transform：translateX（600％）; transform：translateX（600％）; } 100％{-webkit-transform：translateX（0）; transform：translateX（0）; }} @ keyframes moveFromLeft {0％{-webkit-transform：translateX（-600％）; transform：translateX（-600％）; } 100％{-webkit-transform：translateX（0）; transform：translateX（0）; }} @ keyframes moveToRight {0％{-webkit-transform：translateX（0％）; transform：translateX（0％）; } 100％{-webkit-transform：translateX（600％）; transform：translateX（600％）; }} @ keyframes moveToLeft {0％{-webkit-transform：translateX（0％）; transform：translateX（0％）; } 100％{-webkit-transform：translateX（-600％）; transform：translateX（-600％）; }}。mi-slider {-webkit-touch-callout：none; -webkit-user-select：none; -khtml-user-select：none; -moz-user-select：none; -ms-user-select：none; user-select：none;} / *媒体查询* / @媒体屏幕和（max-width：910px）{.mi-slider nav {max-width：90％; } .mi-slider nav a {font-size：12px; padding：40px 10px 30px 14px; }} @ media screen和（max-width：740px）{.mi-slider {height：300px; } .mi-slider nav {top：220px; }} @ media screen和（max-width：490px）{.mi-slider {text-align：center; height：auto; } .mi-slider ul {position：relative; display：inline; bottom：auto; pointer-events：auto; } .mi-slider ul li {-webkit-animation：none！important;动画：none！important; -webkit-transform：translateX（0）！important; transform：translateX（0）！important; padding：10px 3px; min-width：140px; } .mi-slider nav {display：none; }} 

我想要做的是删除下面的代码从 demo.css 文件，并将其应用到需要它的特定元素，而不是应用于一切。离开此代码会对我的网站的显示产生一些影响，但是当我删除它时，它也会影响滑动项：

  *， *：after，*：before {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box; padding：0; margin：0;}  

问题是，知道使用该代码的元素以及为什么它对滑动项有一些影响。

请让我知道如何解决这个问题。

解决方案

正如我在其他主题中承诺的，这里是我帮助你的问题。

有问题的代码（见下面）实际上是一个黑客/修复，强制浏览器使用旧的 border-box 模式，而不是默认的内容-box 。

  *，
 *：after，
 * before {
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 padding：0; 
 margin：0; 
} 
  

这两种模式有什么区别？在 border-box 模式中，元素的宽度/高度组合内容，填充和边框的宽度/高度。在 content-box 模式中，元素的宽度/高度仅与其内容有关。资料来源： developer.mozilla.org 。

简而言之，您可以安全地删除有问题的CSS块。

为了获得相同的外观，您必须找出所有的CSS代码块设置 width 或 height 以及 padding 或 border 。在这些情况下，只需添加以下行到块：

  -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
  

但，经进一步检查，我发现 demo.css 仅用于演示，可以完全删除。所有您需要的多项目滑块在 style.css 中指定。

I just noticed this amazing article on items slider Article from codrops: The demo is available here Demo of the article "How to Create a Simple Multi-Item Slider"

I Would like to implement the same thing on my website by just making some few changes.

The display of the items is made up of three mains file:

HTML

		<div class="container">	
			<header>
				<h1>Simple Multi-Item Slider <span>Category slider with CSS animations</span></h1>
			</header>
			<div class="main">
				<div id="mi-slider" class="mi-slider">
					<ul>
						<li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
						<li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats &amp; Caps</h4></a></li>
						<li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
						<li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
						<li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
						<li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
						<li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
						<li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
						<li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
					</ul>
					<nav>
						<a href="#">Shoes</a>
						<a href="#">Accessories</a>
						<a href="#">Watches</a>
						<a href="#">Bags</a>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
		

First CSS file (demo.css)

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);

html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    background: #fff;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    overflow: scroll;
    overflow-x: hidden;
}

a {
	color: #555;
	text-decoration: none;
}

.container {
	width: 100%;
	position: relative;
}

.container > header {
	width: 90%;
	max-width: 1240px;
	margin: 0 auto;
	position: relative;
	padding: 30px;
}

.main {
	padding-bottom: 80px;
}

.container > header h1 {
	font-size: 34px;
	line-height: 38px;
	margin: 0;
	font-weight: 700;
	color: #333;
	float: left;
}

.container > header h1 span {
	display: block;
	font-size: 20px;
	line-height: 26px;
	font-weight: 300;
}

/* Header Style */
.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.8);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* Demo Buttons Style */
.codrops-demos {
	float: right;
	padding-top: 10px;
}

.codrops-demos a {
    display: inline-block;
    margin: 10px;
    color: #666;
    font-weight: 700;
    line-height: 30px;
    border-bottom: 4px solid transparent;
}

.codrops-demos a:hover {
	color: #000;
	border-color: #000;
}

.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	color: #aaa;
	border-color: #aaa;
}

Second CSS file (style.css)

@import url('demo.css');

.mi-slider {
	position: relative;
	margin-top: 30px;
	height: 490px;
}

.mi-slider ul {
	list-style-type: none;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 140px;
	overflow: hidden;
	text-align: center;
	pointer-events: none;
}

.no-js .mi-slider ul {
	position: relative;
	left: auto;
	bottom: auto;
	margin: 0;
	overflow: visible;
}

.mi-slider ul.mi-current {
	pointer-events: auto;
}

.mi-slider ul li {
	display: inline-block;
	padding: 20px;
	width: 20%;
	max-width: 300px;
	-webkit-transform: translateX(600%);
	transform: translateX(600%);
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}

.no-js .mi-slider ul li {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.mi-slider ul li a,
.mi-slider ul li img {
	display: block;
	margin: 0 auto;
}

.mi-slider ul li a {
	outline: none;
	cursor: pointer;
}

.mi-slider ul li img {
	max-width: 100%;
	border: none;
}

.mi-slider ul li h4 {
	display: inline-block;
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	padding: 20px 10px 0;
}

.mi-slider ul li:hover {
	opacity: 0.7;
} 

.mi-slider nav {
	position: relative;
	top: 400px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	border-top: 5px solid #333;
}

.no-js nav {
	display: none;
}

.mi-slider nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 5px;
	padding: 40px 30px 30px 34px;
	position: relative;
	color: #888;
	outline: none;
	-webkit-transition: color 0.2s linear;
	transition: color 0.2s linear;
}

.mi-slider nav a:hover,
.mi-slider nav a.mi-selected {
	color: #000;
}

.mi-slider nav a.mi-selected:after,
.mi-slider nav a.mi-selected:before {
	content: '';
	position: absolute;
	top: -5px;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.mi-slider nav a.mi-selected:after {
	border-color: transparent;
	border-top-color: #fff;
	border-width: 20px;
	left: 50%;
	margin-left: -20px;
}

.mi-slider nav a.mi-selected:before {
	border-color: transparent;
	border-top-color: #333;
	border-width: 27px;
	left: 50%;
	margin-left: -27px;
}

/* Move classes and animations */

.mi-slider ul:first-child li,
.no-js .mi-slider ul li {
	-webkit-animation: scaleUp 350ms ease-in-out both;
	animation: scaleUp 350ms ease-in-out both;
}

@-webkit-keyframes scaleUp {
	0% { -webkit-transform: translateX(0) scale(0); }
	100% { -webkit-transform: translateX(0) scale(1); }
}

@keyframes scaleUp {
	0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0); }
	100% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); }
}

.mi-slider ul:first-child li:first-child {
	-webkit-animation-delay: 90ms;
	animation-delay: 90ms;
}

.mi-slider ul:first-child li:nth-child(2) {
	-webkit-animation-delay: 180ms;
	animation-delay: 180ms;
}

.mi-slider ul:first-child li:nth-child(3) {
	-webkit-animation-delay: 270ms;
	animation-delay: 270ms;
}

.mi-slider ul:first-child li:nth-child(4) {
	-webkit-animation-delay: 360ms;
	animation-delay: 360ms;
}

/* moveFromRight */

.mi-slider ul.mi-moveFromRight li {
	-webkit-animation: moveFromRight 350ms ease-in-out both;
	animation: moveFromRight 350ms ease-in-out both;
}

/* moveFromLeft */

.mi-slider ul.mi-moveFromLeft li {
	-webkit-animation: moveFromLeft 350ms ease-in-out both;
	animation: moveFromLeft 350ms ease-in-out both;
}

/* moveToRight */

.mi-slider ul.mi-moveToRight li {
	-webkit-animation: moveToRight 350ms ease-in-out both;
	animation: moveToRight 350ms ease-in-out both;
}

/* moveToLeft */

.mi-slider ul.mi-moveToLeft li {
	-webkit-animation: moveToLeft 350ms ease-in-out both;
	animation: moveToLeft 350ms ease-in-out both;
}

/* Animation Delays */

.mi-slider ul.mi-moveToLeft li:first-child,
.mi-slider ul.mi-moveFromRight li:first-child,
.mi-slider ul.mi-moveToRight li:nth-child(4),
.mi-slider ul.mi-moveFromLeft li:nth-child(4) {
	-webkit-animation-delay: 0ms;
	animation-delay: 0ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(2),
.mi-slider ul.mi-moveFromRight li:nth-child(2),
.mi-slider ul.mi-moveToRight li:nth-child(3),
.mi-slider ul.mi-moveFromLeft li:nth-child(3) {
	-webkit-animation-delay: 90ms;
	animation-delay: 90ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(3),
.mi-slider ul.mi-moveFromRight li:nth-child(3),
.mi-slider ul.mi-moveToRight li:nth-child(2),
.mi-slider ul.mi-moveFromLeft li:nth-child(2) {
	-webkit-animation-delay: 180ms;
	animation-delay: 180ms;
}

.mi-slider ul.mi-moveToLeft li:nth-child(4),
.mi-slider ul.mi-moveFromRight li:nth-child(4),
.mi-slider ul.mi-moveToRight li:first-child,
.mi-slider ul.mi-moveFromLeft li:first-child  {
	-webkit-animation-delay: 270ms;
	animation-delay: 270ms;
}

/* Animations */

@-webkit-keyframes moveFromRight {
	0% { -webkit-transform: translateX(600%); }
	100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes moveFromLeft {
	0% { -webkit-transform: translateX(-600%); }
	100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes moveToRight {
	0% { -webkit-transform: translateX(0%); }
	100% { -webkit-transform: translateX(600%); }
}

@-webkit-keyframes moveToLeft {
	0% { -webkit-transform: translateX(0%); }
	100% { -webkit-transform: translateX(-600%); }
}

@keyframes moveFromRight {
	0% { -webkit-transform: translateX(600%); transform: translateX(600%); }
	100% { -webkit-transform: translateX(0); transform: translateX(0); }
}

@keyframes moveFromLeft {
	0% { -webkit-transform: translateX(-600%); transform: translateX(-600%); }
	100% { -webkit-transform: translateX(0); transform: translateX(0); }
}

@keyframes moveToRight {
	0% { -webkit-transform: translateX(0%); transform: translateX(0%); }
	100% { -webkit-transform: translateX(600%); transform: translateX(600%); }
}

@keyframes moveToLeft {
	0% { -webkit-transform: translateX(0%); transform: translateX(0%); }
	100% { -webkit-transform: translateX(-600%); transform: translateX(-600%); }
}

.mi-slider {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Media Queries */
@media screen and (max-width: 910px){
	.mi-slider nav {
		max-width: 90%;
	}
	.mi-slider nav a {
		font-size: 12px;
		padding: 40px 10px 30px 14px;
	}
}

@media screen and (max-width: 740px){
	.mi-slider {
		height: 300px;
	}
	.mi-slider nav {
		top: 220px;
	}
}

@media screen and (max-width: 490px){ 
	.mi-slider {
		text-align: center;
		height: auto;
	}

	.mi-slider ul {
		position: relative;
		display: inline;
		bottom: auto;
		pointer-events: auto;
	}

	.mi-slider ul li {
		-webkit-animation: none !important;
		animation: none !important;
		-webkit-transform: translateX(0) !important;
		transform: translateX(0) !important;
		padding: 10px 3px;
		min-width: 140px;
	}

	.mi-slider nav {
		display: none;
	}
}

What I am trying to do, is to remove the following code from the demo.css file and apply it to the specific elements which will need it, instead of applying it to everything. Leaving this code is having some effects on the display of my website, but when I remove it, it also affects the sliding items:

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

The problem is that, I do not know the elements which are using that code and why it is having some effects on the sliding items.

Please let me know how I can solve this problem.

解决方案

As promised in my other thread, here is my help with your issue.

The problematic code (seen below) is actually a hack/fix to force the browser to use the old border-box mode instead of the default content-box.

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

What is the difference between the two modes? In the border-box mode, the width/height of the element combines the width/height of the content, padding, and borders. In the content-box mode, the width/height of the element is regarding only it's content. Source: developer.mozilla.org.

In short, you can safely remove the problematic CSS block. However, this will result in some items getting bigger.

In order to gain the same look, you must seek out all blocks of CSS code that set width or height along with padding or border. In these cases, simply add the following lines to the block:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

But, upon further inspection, I have found that the demo.css is only used for the demonstration and can be removed completely. All you need for the multi-item slider is specified in the style.css.

这篇关于修改两个div之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！