Question

以下是我想使用hr的示例，它应该扩展整个页面宽度。在下面的代码中，即使它在hr消息上方显示line，我也没有使用alert。怎么这条线被画出来了？

如何将其扩展到整个宽度页？

Codepan演示：Demo link

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Doc</title>
  <meta name="description" content="The HTML5">
  <meta name="author" content="Hadi">
</head>
<body>
<div class="container">
    <div class="row">
    <div class="clearfix">&nbsp</div>
    <div class="menu col-md-8">
      <ul>
        <li><a href=""#>Top picks </a><span>beta</span></li>
        <li><a href=""#>Popular</a><span>beta</span></li>
          <li><a href=""#>Friends analysis </a></li>
      </ul>

      <p class="custom-alert">Article changes everyday! come back for more fun......<p>
    </div>
    </div><!--./row-->
</div><!--./container -->
</body>
</html>

当我使用anchor标记时，文字颜色会变为蓝色。如何为锚标记创建grey？

<li><a href=""#>Top picks </a><span>beta</span></li>

Answer 1

您的演示中没有<hr>，它是带有ul的{{1}}。您无法将border-bottom添加到width: 100%;，因为它已经处于容器的全宽范围内，因为您使用的是bootstrap的网格系统。删除ul将解决此问题。

要设置锚点的样式，您应该使用：

.col-md-8

demo

Answer 2

hr尝试将其设置为您的css中的width:100%。至于锚标签，您需要覆盖默认样式：

a{
    color: grey;
}

或者如果您希望它们是不同的颜色，则可以添加class名称

将<hr />的宽度扩展到页面宽度并更改锚标记的颜色

2 个答案: