Question

当您将鼠标悬停在其上时，li元素向右滑动。如何更改它以便它可以从右向左移动？我还希望子弹出现在右侧。我已经尝试改变子弹的位置，并将填充左侧更改为填充右侧。但它不会起作用。任何人都可以帮我这个吗？

.cmsms_timeline {
	position:relative;
	margin:-11px 0 0 0;
	padding:0 0 37px 29px;
	list-style:none;
}
.cmsms_timeline li {
	position:relative;
	padding-top:24px;
}
.cmsms_timeline li:before,
.cmsms_timeline:before {
	position:absolute;
	top:-2px;
	left:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:1px;
	height:28px;
	background:rgba(0, 0, 0, .08);
	content:'';
}
.cmsms_timeline:before {
	top:auto;
	bottom:11px;
	left:29px;
}
.cmsms_timeline li a {
	position:relative;
	padding-left:13px;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
.cmsms_timeline li a:hover {padding-left:19px;}
.cmsms_timeline li a:before {
	position:absolute;
	top:5px;
	left:-2px;
	width:5px;
	height:5px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:rgba(0, 0, 0, .2);
	content:'';
	-webkit-transition:background .3s ease-in-out;
	-moz-transition:background .3s ease-in-out;
	-ms-transition:background .3s ease-in-out;
	-o-transition:background .3s ease-in-out;
	transition:background .3s ease-in-out;
}

<ul class="cmsms_timeline">
    <li><a>hello world</a></li>
</ul>

Answer 1

要使其从右向左转换，只需反转填充左侧值：

.cmsms_timeline li a {
    position:relative;
    padding-left:19px;/*Just reverse these v*/
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.cmsms_timeline li a:hover {padding-left:13px;}/*Just reverse these ^*/

＆＃13;

.cmsms_timeline {
	position:relative;
	margin:-11px 0 0 0;
	padding:0 0 37px 29px;
	list-style:none;
}
.cmsms_timeline li {
	position:relative;
	padding-top:24px;
}
.cmsms_timeline li:before,
.cmsms_timeline:before {
	position:absolute;
	top:-2px;
	left:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:1px;
	height:28px;
	background:rgba(0, 0, 0, .08);
	content:'';
}
.cmsms_timeline:before {
	top:auto;
	bottom:11px;
	left:29px;
}
.cmsms_timeline li a {
	position:relative;
	padding-left:19px;/*Just reverse these v*/
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
.cmsms_timeline li a:hover {padding-left:13px;}/*Just reverse these ^*/
.cmsms_timeline li a:before {
	position:absolute;
	top:5px;
	left:-2px;
	width:5px;
	height:5px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:rgba(0, 0, 0, .2);
	content:'';
	-webkit-transition:background .3s ease-in-out;
	-moz-transition:background .3s ease-in-out;
	-ms-transition:background .3s ease-in-out;
	-o-transition:background .3s ease-in-out;
	transition:background .3s ease-in-out;
}

＆＃13;

<ul class="cmsms_timeline">
    <li><a>hello world</a></li>
</ul>

＆＃13;

＆＃13;
在右侧子弹上，有很多提议的方法可以做到这一点：
http://css.maxdesign.com.au/listutorial/08.htm
http://www.sitepoint.com/forums/showthread.php?482603-lt-ul-gt-with-bullets-on-the-right
http://voidcanvas.com/how-to-place-bullets-of-tag-after-the-text-of-each/

Answer 2

尝试更改此行：

.cmsms_timeline li a:hover {padding-left:19px;}

你需要使这个数字小于13px：

.cmsms_timeline li a:hover {padding-left:7px;}

Answer 3

我认为这是你的答案。

.cmsms_timeline {
  position:relative;
  margin:-11px 0 0 0;
  padding:0 0 37px 29px;
  list-style:none;

}

.cmsms_timeline li {
  position:relative;
  padding-top:24px;
}

.cmsms_timeline li:before,
.cmsms_timeline:before {
  position:absolute;
  top:-2px;
  left:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:1px;
  height:28px;
  background:rgba(0, 0, 0, .08);
  content:'';
}

.cmsms_timeline:before {
  top:auto;
  bottom:11px;
  left:29px;
}

.cmsms_timeline li a {
  position:relative;
  padding-left:13px;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -ms-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
}

.cmsms_timeline li a:hover {
  margin-left:-19px;
  padding-right:19px;
}

.cmsms_timeline li a:after {
  position:absolute;
  top:7px;
  right:-10px;
  width:5px;
  height:5px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  background:rgba(0, 0, 0, .2);
  content:'';
  -webkit-transition:background .3s ease-in-out;
  -moz-transition:background .3s ease-in-out;
  -ms-transition:background .3s ease-in-out;
  -o-transition:background .3s ease-in-out;
  transition:background .3s ease-in-out;
}

<ul class="cmsms_timeline">
  <li><a>hello world</a></li>
</ul>

Answer 4

这真的很容易。按照我的步骤:)）

ul{
  padding:0;
}
ul>li{
  list-style:none;
  text-align:right;
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out; /* Prefix for Chrome & Safari */
  -moz-transition: 0.5s all ease-in-out; /* Prefix for Mozilla Firefox */
  -ms-transition: 0.5s all ease-in-out; /* Prefix for IE */
  -o-transition: 0.5s all ease-in-out; /* Prefix for Opera */
}
ul>li:after{
  display:inline-block;
  content:"•";
}
ul>li:hover{
  padding-right:50px;
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out; /* Prefix for Chrome & Safari */
  -moz-transition: 0.5s all ease-in-out; /* Prefix for Mozilla Firefox */
  -ms-transition: 0.5s all ease-in-out; /* Prefix for IE */
  -o-transition: 0.5s all ease-in-out; /* Prefix for Opera */
}

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>  
</ul>

如何让这个css webkit从左到右转换？

4 个答案: