html - 占宽度小于 100% 的水平线

Question

我知道可以使用边框代替水平线标记 ( hr )。但是，在这种情况下，我不希望线条占用 100% 宽度；当前div如果我要放入边框，边框也会这样做。

所以我想在 80% 宽度 中放置一条水平线 ( hr )，但它没有显示出来，特别是宽度不是 80% .我要插入的位置是 bottom 之后的第一行我的代码中的类。

我的意图是将水平线 ( hr ) 放在页面上 Cola ( <p class="center1">Cola</p> ) 的正上方。同样，这里的样式似乎也不适用于 hr类(class);尝试在上面加上宽度和颜色。

* {
  margin: 0;
}
body {
  background-color: green;
}
html,
body {
  height: 100%;
}
#subnav {
  height: 10%;
  text-align: center;
}
#subnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: red;
  text-align: center;
  width: 100%;
  font-weight: bold;
}
#subnav li {
  display: inline-block;
}
#subnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#subnav li a:hover {
  color: yellow;
}
#subnav li a:active {
  color: yellow;
}
#bigwrap {
  height: 100%;
}
.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  min-height: 100vh;
  width: 80%;
  margin: 0 auto;
  background-color: white;
  font-size: 20px;
}
.top {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}
.bottom {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.bottom {
  flex: 0 0 100%;
  height: 50%;
}
hr.style1 {
  border-top: 1px solid #8c8b8b;
  width: 80%;
}
.top {
  flex: 0 0 100%;
  height: 50%;
}
.topa {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-start;
  margin-left: 3%;
  width: 45%;
  height: 100%;
}
.topb {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  width: 50%;
  height: 100%;
}
li {
  list-style-type: none;
  font-size: 18px;
}
.advisory {
  background-color: white;
  margin: auto;
  width: 100%;
}
#advisory ul li {
  margin-bottom: 2%;
}
.center {
  text-align: center;
}
.center1 {
  text-align: center;
  color: green;
  font-size: 28px;
}
.tpoint {
  font-size: 24px;
  color: orange;
}

<div class="container">
  <div id="subnav">
    <ul>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a class="active" href="#">Corn </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
    </ul>
  </div>
  <div class="top">
    <div class="topa">
      <img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
      <img src="bacon.jpg" width="209" height="205" alt="Picture of kid\" />
    </div>
    <div class="topb">
      <h2> Sams </h2>
      <p>Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence
        this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample
        sentence this Sample sentence this Sample sentence this Sample sentence this</p>
    </div>
  </div>
  <div class="bottom">
    <div class="sam">
      <hr class="style1">
      <p class="center1">Cola</p>
      <p class="center tpoint">Sample</p>
      <ul>
        <li>Sample
          <ul>
            <li>Sample</li>
            <li>rsam</li>
          </ul>
        </li>
        <li>san
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
        <li>sam
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
        <li>sam
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
        <li>sam
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
      </ul>
      <p class="center tpoint">The sam</p>
      <ul>
        <li>sam
          <ul>
            <li>sam</li>
          </ul>
        </li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
      </ul>
      <p class="center tpoint">Eggs</p>
      <ul>
        <li>sam
          <ul>
            <li>san</li>
          </ul>

        </li>
        <li>Eri
          <ul>
            <li>Sam</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您可以按如下方式修改您的 CSS:

将宽度 100% 添加到 sam 类:

.sam {
   width: 100%;
}

将居中添加到类style1:

.style1 { 
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}