At skabe en visuelt tiltalende og velstruktureret webside involverer ofte brugen af vandrette linjer. Disse linjer kan hjælpe med at adskille forskellige sektioner af indhold, hvilket gør det lettere for brugerne at læse og forstå de præsenterede oplysninger. I denne vejledning vil vi udforske to effektive metoder til at tilføje vandrette linjer i HTML: ved hjælp af>
tag- og CSS-egenskaber.
Forskellige tilgange til at tilføje vandret linje i HTML
1. Brug
tag:
Det Vandret regel t kl (
)bruges til at indsætte vandrette linjer i HTML-dokumentet for at adskille sektioner af dokumentet. Det er et tomt eller uparret tag, hvilket betyder, at der ikke er behov for det afsluttende tag.
Eksempel: Dette eksempel beskriver
tag for at tilføje den vandrette linje.
liste streng javaHTML
Vandret linje titel> hoved> <body> <h2>Vandret linje ved hjælp af forskellige attributtersh2><hr width='100%' size='2'> <hr width='100%' size='2' color='blue' noshade> <hr width='100%;' color='red' size='5'>body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="HTML vandret linje ved hjælp af hr tag"><p>Produktion</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-date-string">konverter dato til streng</a>
</blockquote> <h3> <b> <strong>2. Brug af CSS-egenskaber:</strong> </b> </h3><p dir='ltr'><span>I denne tilgang vil vi bruge</span> <i> <em>grænse-stil</em> </i> <span>Ejendom</span> <i> <em> </em> </i> <span>for at skabe den vandrette linje. Vi kan enten bruge</span> <i> <em>border-top</em> </i> <span>egenskab, der angiver stilen for den øverste kant eller</span> <i> <em>grænse-bund</em> </i> <span>egenskab, som kan indstille stilen for den nederste kant af et element. Begge egenskaber kan bruges til at tilføje den vandrette linje.</span></p> <p dir='ltr'> <b> <strong>Eksempel:</strong> </b> <span>Dette eksempel beskriver tegningen af den vandrette linje ved hjælp af</span> <i> <em>grænse-stil</em> </i> <span>Ejendom.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Vandret linje ved hjælp af CSS Propertiestitle><style>.horizontal_line { width: 90%; højde: 5px; border-top: 5px prikket sort; linjehøjde: 80%; } .line { border-bottom: 5px fast rød; margin-top: 5px; bredde: 90%; } stil> hoved> <body> <h2>Vandret linje ved hjælp af CSS Propertiesh2><h3>stiplet vandret linieh3><div>div><h3>Almindelig vandret linieh3><div>div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="horisontal linje ved hjælp af CSS eksempel output"><p>Produktion</p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/cpp-examples/">Cpp Eksempler</a> </li><li> <a href="/javascript-underscore/">Javascript - Underscore.js</a> </li><li> <a href="/operating-system/">Operativ System</a> </li><li> <a href="/memory-management/">Hukommelseshåndtering</a> </li><li> <a href="/r-tutorial/">R Tutorial</a> </li><li> <a href="/dip-tutorial/">Dip Tutorial</a> </li><li> <a href="/java-multithreading/">Java Multithreading</a> </li><li> <a href="/python-searching-exercises/">Python Søgeøvelser</a> </li><li> <a href="/uml/">Uml</a> </li><li> <a href="/python-exceptions/">Python-Undtagelser</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Oracle ALTER TABLE-erklæring</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Oracle Alter Table for begyndere og professionelle med eksempler på indsæt, vælg, opdater, slet, tabel, se, join, tast, funktioner, procedurer, indekser, markør osv.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/oracle-alter-table-statement"> <i class="fa fa-external-link"></i> Læs Mere</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/extended-integral-types-choosing-the-correct-integer-size-in-c-c">Udvidede integraltyper (Valg af den korrekte heltalsstørrelse i C/C++)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-websites/">Bedste Hjemmesider</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-alert">JavaScript-advarsel()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pitch-perfect-full-cast">Pitch Perfect – fuld rollebesætning og karakterer</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-split-string-java-with-delimiter">Hvordan opdeles en streng i Java med Delimiter?</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populære Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/alpha-beta-pruning">alfa beta beskæring</a>
</li><li><a href="/diana-blacker-cavendish">diana mary blacker</a>
</li><li><a href="/dfs-algorithm">dfs algoritme</a>
</li><li><a href="/how-call-javascript-function-html">javascript opkaldsfunktion fra html</a>
</li><li><a href="/how-convert-string-json-object-java">streng til jsonobject</a>
</li><li><a href="/first-order-logic-artificial-intelligence">første ordens logik</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rettigheder Forbeholdes | <a href="//fi.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>