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

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

html :

<hr id="runningLine">

JavaScript：

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

答案＃1

hr 元素的表现就像给它设置了 margin: 0 auto。正如我在对你问题的评论中所说，我会使用 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>