0
Я знаю, что границу можно использовать вместо тега горизонтальной линии (hr). Однако в этом случае я не хочу, чтобы линия занимала 100% ширина; ток div делает и так бы границу, если бы я поставить границу.Горизонтальная линия, которая занимает менее 100% ширины
Так что я хотел бы поставить горизонтальную линию (hr) в с 80% шириной, но это не отображается, а в частности, ширина нет 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>
Родитель вашей строки - это div 'sam', ширина которого составляет 134px. Установив ширину 'hr' до 80%, вы говорите, что она составляет 80% от 134 пикселей. – Santi