使列表项以特定方式相互重叠（序列）

时间：2014-09-28 18:37:32

标签： html css

所以我真的不知道怎么用文字解释这个。但这正是我想要实现的目标 image

这就是我迄今为止所做的link

＆＃13;
＆＃13; 
ul.quicktabs-tabs li {
  float: left;
  height: 20px;
  margin: 0;  
  margin-right:-20px;
  padding: 0; 
  width:150px;
  background: transparent;
}

ul.quicktabs-tabs li a {
  font-family: inherit;
  margin: 0;
  display: block; 
  padding: 10px 27px 10px 7px;
  text-decoration: none;
  color: #6da648 !important;
  border: 2px solid #6da648;
  border-radius: 6px;
  margin: 0;
  background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
  color: #fff !important;
  background-position: right -20px;
  background: #6da648;
}
ul.quicktabs-tabs {
  margin: 0 0 10px 0; 
  font-size: 11px; 
  list-style: none;
  padding: 1px 23px 23px 0;
}
＆＃13; 
<ul class="quicktabs-tabs">
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

右侧的

<li>元素与左侧的<li>元素重叠。使用类z-index设置元素的position和active以防止重叠，调整一些填充和边距。

＆＃13;
＆＃13; 
ul.quicktabs-tabs li {
  float: left;
  height: 20px;
  margin: 0;  
  margin-right:-8px;
  padding: 0; 
  width:150px;
  background: transparent;
}

ul.quicktabs-tabs li a {
  font-family: inherit;
  margin: 0;
  display: block; 
  padding: 10px 27px 10px 12px;
  text-decoration: none;
  color: #6da648 !important;
  border: 2px solid #6da648;
  border-radius: 6px;
  margin: 0;
  background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
  color: #fff !important;
  background-position: right -20px;
  background: #6da648;
  z-index: 1000;
  position: relative;
}
ul.quicktabs-tabs {
  margin: 0 0 10px 0; 
  font-size: 11px; 
  list-style: none;
  padding: 1px 23px 23px 0;
}
＆＃13; 
<ul class="quicktabs-tabs">
    <li><a href="#">Item 0</a></li>
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我使用css3 progress bar指南创建了一个进度条：

＆＃13;
＆＃13; 
		.meter {
		    height: 40px;
		    /* Can be anything */
		    position: relative;
		    margin: 60px 0 20px 0;
		    /* Just for demo spacing */
		    -moz-border-radius: 25px;
		    -webkit-border-radius: 25px;
		    border-radius: 25px;
		    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
		    -moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
		    box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
		    border: solid 1px orange;
		}
		.meter > span {
		    display: block;
		    height: 100%;
		    -webkit-border-top-right-radius: 8px;
		    -webkit-border-bottom-right-radius: 8px;
		    -moz-border-radius-topright: 8px;
		    -moz-border-radius-bottomright: 8px;
		    border-top-right-radius: 8px;
		    border-bottom-right-radius: 8px;
		    -webkit-border-top-left-radius: 20px;
		    -webkit-border-bottom-left-radius: 20px;
		    -moz-border-radius-topleft: 20px;
		    -moz-border-radius-bottomleft: 20px;
		    border-top-left-radius: 20px;
		    border-bottom-left-radius: 20px;
		    background-color: rgb(43, 194, 83);
		    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
		    background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
		    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
		    -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
		    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
		    position: relative;
		    overflow: hidden;
		}
		.meter > span:after, .animate > span > span {
		    content:"";
		    position: absolute;
		    top: 0;
		    left: 0;
		    bottom: 0;
		    right: 0;
		    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
		    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
		    z-index: 1;
		    -webkit-background-size: 50px 50px;
		    -moz-background-size: 50px 50px;
		    background-size: 50px 50px;
		    -webkit-animation: move 2s linear infinite;
		    -moz-animation: move 2s linear infinite;
		    -webkit-border-top-right-radius: 8px;
		    -webkit-border-bottom-right-radius: 8px;
		    -moz-border-radius-topright: 8px;
		    -moz-border-radius-bottomright: 8px;
		    border-top-right-radius: 8px;
		    border-bottom-right-radius: 8px;
		    -webkit-border-top-left-radius: 20px;
		    -webkit-border-bottom-left-radius: 20px;
		    -moz-border-radius-topleft: 20px;
		    -moz-border-radius-bottomleft: 20px;
		    border-top-left-radius: 20px;
		    border-bottom-left-radius: 20px;
		    overflow: hidden;
		}
		.animate > span:after {
		    display: none;
		}
		@-webkit-keyframes move {
		    0% {
		        background-position: 0 0;
		    }
		    100% {
		        background-position: 50px 50px;
		    }
		}
		@-moz-keyframes move {
		    0% {
		        background-position: 0 0;
		    }
		    100% {
		        background-position: 50px 50px;
		    }
		}
		.orange > span {
		    background-color: #f1a165;
		    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
		    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
		    background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
		}
		.red > span {
		    background-color: #f0a3a3;
		    background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
		    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
		    background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
		}
		.nostripes > span > span, .nostripes > span:after {
		    -webkit-animation: none;
		    -moz-animation: none;
		    background-image: none;
		}
＆＃13; 
<div class="meter orange nostripes">	<span style="width: 33.3%"></span>

</div>
＆＃13;
＆＃13;
＆＃13;   

如果你想使用jquery，你也可以动画它：

＆＃13;
＆＃13; 
$(".meter > span").each(function() {
	$(this)
		.data("origWidth", $(this).width())
		.width(0)
		.animate({
			width: $(this).data("origWidth")
		}, 1200);
});
＆＃13; 
		.meter {
		    height: 40px;
		    /* Can be anything */
		    position: relative;
		    margin: 60px 0 20px 0;
		    /* Just for demo spacing */
		    -moz-border-radius: 25px;
		    -webkit-border-radius: 25px;
		    border-radius: 25px;
		    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
		    -moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
		    box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
		    border: solid 1px orange;
		}
		.meter > span {
		    display: block;
		    height: 100%;
		    -webkit-border-top-right-radius: 8px;
		    -webkit-border-bottom-right-radius: 8px;
		    -moz-border-radius-topright: 8px;
		    -moz-border-radius-bottomright: 8px;
		    border-top-right-radius: 8px;
		    border-bottom-right-radius: 8px;
		    -webkit-border-top-left-radius: 20px;
		    -webkit-border-bottom-left-radius: 20px;
		    -moz-border-radius-topleft: 20px;
		    -moz-border-radius-bottomleft: 20px;
		    border-top-left-radius: 20px;
		    border-bottom-left-radius: 20px;
		    background-color: rgb(43, 194, 83);
		    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
		    background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
		    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
		    -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
		    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
		    position: relative;
		    overflow: hidden;
		}
		.meter > span:after, .animate > span > span {
		    content:"";
		    position: absolute;
		    top: 0;
		    left: 0;
		    bottom: 0;
		    right: 0;
		    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
		    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
		    z-index: 1;
		    -webkit-background-size: 50px 50px;
		    -moz-background-size: 50px 50px;
		    background-size: 50px 50px;
		    -webkit-animation: move 2s linear infinite;
		    -moz-animation: move 2s linear infinite;
		    -webkit-border-top-right-radius: 8px;
		    -webkit-border-bottom-right-radius: 8px;
		    -moz-border-radius-topright: 8px;
		    -moz-border-radius-bottomright: 8px;
		    border-top-right-radius: 8px;
		    border-bottom-right-radius: 8px;
		    -webkit-border-top-left-radius: 20px;
		    -webkit-border-bottom-left-radius: 20px;
		    -moz-border-radius-topleft: 20px;
		    -moz-border-radius-bottomleft: 20px;
		    border-top-left-radius: 20px;
		    border-bottom-left-radius: 20px;
		    overflow: hidden;
		}
		.animate > span:after {
		    display: none;
		}
		@-webkit-keyframes move {
		    0% {
		        background-position: 0 0;
		    }
		    100% {
		        background-position: 50px 50px;
		    }
		}
		@-moz-keyframes move {
		    0% {
		        background-position: 0 0;
		    }
		    100% {
		        background-position: 50px 50px;
		    }
		}
		.orange > span {
		    background-color: #f1a165;
		    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
		    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
		    background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
		}
		.red > span {
		    background-color: #f0a3a3;
		    background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
		    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
		    background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
		}
		.nostripes > span > span, .nostripes > span:after {
		    -webkit-animation: none;
		    -moz-animation: none;
		    background-image: none;
		}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meter orange nostripes">	<span style="width: 33.3%"></span>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你走了：

<强> http://jsfiddle.net/r0L0nty2/43/

您必须为整个列表指定边框而不是列表项。现在使用此代码修复此问题。

ul.quicktabs-tabs li {
height: 20px;
width:150px;
float: left;
background: transparent;
}

ul.quicktabs-tabs li a {
font-family: inherit;
margin: 0;
display: block; 
padding: 10px 27px 10px 7px;
text-decoration: none;
color: #6da648 !important;
margin: 0;
background:#fff;
}
ul.quicktabs-tabs li.active a { border-radius: 0 18px 18px 0;}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
color: #fff !important;
background-position: right -20px;
    background: #6da648;
}
ul.quicktabs-tabs {
margin: 0 0 10px 0; 
 font-size: 11px; 
list-style: none;
padding: 0 0 34px 0;
border: 2px solid #6da648;
}
<ul class="quicktabs-tabs">
    <li class="active"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>

相关问题
最新问题