0
Ich weiß, dass ein Rand anstelle des horizontalen Linienetiketts (hr) verwendet werden kann. In diesem Fall möchte ich jedoch nicht, dass die Leitung 100% Breite aufnimmt; die aktuellen div tut und so würde die Grenze, wenn ich in einen Rahmen setzen war.Horizontale Linie, die weniger als 100% Breite einnimmt
So würde Ich mag eine horizontale Linie setzen (hr) mit 80% Breite aber es zeigt nicht auf, und speziell die Breite ist nicht 80%. Der Ort, an dem ich es einfügen möchte, ist die erste Zeile nach der Klasse bottom in meinem Code.
Meine Absicht ist es, die horizontale Linie (hr) direkt über die Cola (<p class="center1">Cola</p>) auf der Seite zu setzen. Auch das Styling scheint hier für die hr Klasse nicht zu funktionieren; versuche, eine Breite und eine Farbe darauf zu setzen.
* {
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>
Die Eltern Ihrer Linie ist das div 'sam', das eine Breite von 134px hat. Wenn Sie die "hr" -Breite auf 80% setzen, geben Sie an, dass sie 80% von 134 px beträgt. – Santi