如何在一个方向上改变<hr>元素的宽度？

Question

我试图<hr>用jQuery改变元素的宽度,但它改变了2个方向的宽度.我只希望它伸展到右侧.当我对我的应用程序执行某些操作时,变量food.runningDistance会更改.代码:

HTML:

<hr id="runningLine">

javascript:

$("#runningLine").animate({width: food.runningDistance}, 500);

Answer 1

一个hr元素的行为就像margin: 0 auto被设置到它.正如我在你对你的问题的评论中所说,我会使用a,div因为hr它应该标记一个主题中断,但你将它用于不同的目的.

如果您仍希望以您希望的方式使其工作,您必须设置margin-left: 0; margin-right: 0;:

$("#runningLine").css("margin", 0).animate({width: "10%"}, 3000);

<hr id="runningLine">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>