hr 应该比 div 长（宽度）

Question

我有一个网页，当网页在平板电脑上显示时，我使用 <hr> 标签来分隔内容。它看起来像这样：

在红色矩形处，该行应该继续。然而，事实并非如此。我必须在 html/css 中更改什么才能让 <hr> 继续到页面边界？

页面在这里：http://crossroads-festival.org/test2015/en/film/almaen 请注意将浏览器宽度减小到至少 811px 以便显示水平线。

感谢您的帮助！

更新： <hr> 的 css 是

hr {
  height: 0;
  border: none;
  border-bottom: 1px solid #c1c1c1;
  margin-bottom: 1.5em;
  background: none;
}

divider-mobile class 的 css 是：

.divider-mobile {
  margin-top: 3.125em;
  margin-bottom: 3.125em;
  overflow: visible;
  border: none;
  color: #888888;
  background-color: #888888;
  height: 1px;
  width: 150%;
  margin-left: -25%;
}

在 html 我这样使用它：

<hr class="divider-mobile">

Answer 1

在你的CSS中你有：

#filmcontent {
  overflow-x: hidden;
}

这可以防止 <hr> 上的负边距到达页面边缘。

您还需要删除 <hr> 上的 width: 150%; 和 margin-left: 25% 并改为...

margin-left: -20px;
margin-right: -20px;

（其中 20px 等于 #content .entry-content 上的内边距）

这会让您达到想要的效果！

hr 应该比 div 长（宽度）

hr should be longer (width) than div

html

css

width