我知道可以使用边框代替水平线标记（hr）。但是，在这种情况下，我不希望该线占据 100％宽度;当前的div确实如此，如果我要设置边框，边界也是如此。
所以我想在 80％宽度中放置一条水平线（hr），但它没有显示，特别是宽度不是 80％即可。我要插入它的位置是我的代码中bottom类之后的第一行。
我的目的是将水平线（hr）放在页面上 Cola （<p class="center1">Cola</p>）的正上方。对于hr类，样式似乎也不起作用;试图在上面加上宽度和颜色。
* {
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>
答案 0 :(得分：1)
您的hr位于宽度较小的容器内（div .sam），因此宽度为该容器的80％。只需在HTML代码中向上移动.bottom div：
* {
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>
<hr class="style1">
<div class="bottom">
<div class="sam">
<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>
答案 1 :(得分：1)
hr位于.sam div内，没有达到全宽。这就是为什么您看到hr小width（但宽度为80％）的原因。
.sam{
width:100%
}
这将解决问题。
答案 2 :(得分：1)
您可以修改CSS，如下所示：
将宽度 100％添加到班级sam：
.sam {
width: 100%;
}
将居中添加到班级style1：
.style1 {
width: 80%;
margin-left: auto;
margin-right: auto;
}
答案 3 :(得分：0)
试一试
<hr align="left" width="50%">
答案 4 :(得分：-1)
你在标记中有错误
如果您想要水平线100％宽度
将<hr class="style1">更改为<hr class="style1"/>
这解决了它