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

Question

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

html：

<hr id="runningLine">

javascript：

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

Answer 1

hr元素的行为类似于margin: 0 auto。正如我在对您的问题的评论中所述，我会使用div，因为hr是supposed to mark a thematic break，但您将其用于其他目的。

如果您仍希望以您希望的方式使其工作，则必须设置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>