Att skapa en visuellt tilltalande och välstrukturerad webbsida innebär ofta användning av horisontella linjer. Dessa rader kan hjälpa till att separera olika delar av innehållet, vilket gör det lättare för användare att läsa och förstå informationen som presenteras. I den här guiden kommer vi att utforska två effektiva metoder för att lägga till horisontella linjer i HTML: med hjälp av>
tagg- och CSS-egenskaper.
Olika tillvägagångssätt för att lägga till horisontell linje i HTML
1. Använda
märka:
De Horisontell regel t vid (
)används för att infoga horisontella linjer i HTML-dokumentet till separata delar av dokumentet. Det är en tom eller oparad tagg vilket betyder att det inte finns något behov av den avslutande taggen.
Exempel: Detta exempel beskriver
tagga för att lägga till den horisontella linjen.HTML
Horisontell linje titel> huvud> <body> <h2>Horisontell linje med olika attributsh2><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 horisontell linje med hr-tagg"><p>Produktion</p> <h3> <b> <strong>2. Använda CSS-egenskaper:</strong> </b> </h3><p dir='ltr'><span>I detta tillvägagångssätt kommer vi att använda</span> <i> <em>border-stil</em> </i> <span>Fast egendom</span> <i> <em> </em> </i> <span>för att skapa den horisontella linjen. Vi kan antingen använda</span> <i> <em>border-top</em> </i> <span>egenskap som anger stilen för den övre kanten eller</span> <i> <em>gräns-botten</em> </i> <span>egenskap, som kan ställa in stilen för den nedre kanten av ett element. Båda egenskaperna kan användas för att lägga till den horisontella linjen.</span></p> <p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Detta exempel beskriver ritningen av den horisontella linjen med hjälp av</span> <i> <em>border-stil</em> </i> <span>Fast egendom.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horisontell linje med CSS Propertiestitle><style>.horizontal_line { bredd: 90 %; höjd: 5px; border-top: 5px prickad svart; linjehöjd: 80%; } .line { border-bottom: 5px fast röd; margin-top: 5px; bredd: 90%; } stil> huvud> <body> <h2>Horisontell linje med CSS Propertiesh2><h3>prickad horisontell linjeh3><div>div><h3>Vanlig horisontell linjeh3><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="horisontell linje med CSS-exempelutdata"><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="//spiritscaution.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="/java-interfaces/">Java-Gränssnitt</a> </li><li> <a href="/physics-formulas/">Fysik-Formler</a> </li><li> <a href="/dot-net/">Dot-Net</a> </li><li> <a href="/c-language/">C -språk</a> </li><li> <a href="/python-string/">Python-Sträng</a> </li><li> <a href="/microsoft/">Microsoft</a> </li><li> <a href="/html-tutorial/">Html Handledning</a> </li><li> <a href="/windows-10-tricks/">Windows 10 Knep</a> </li><li> <a href="/installation-ubuntu/">Installation På Ubuntu</a> </li><li> <a href="/hashtable/">Hashtable</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Privata metoder i Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> En datavetenskapsportal för nördar. Den innehåller välskrivna, genomtänkta och väl förklarade artiklar om datavetenskap och programmering, frågesporter och frågor om praktik/konkurrenskraftig programmering/företagsintervju.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/private-methods-python"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/javascript-string-match-method">JavaScript String match() Metod</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/domain-driven-design">Domändriven design (DDD)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-become-national-merit-semifinalist-1311178">Hur man blir en nationell meritsemifinalist</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pointers-vs-references-c">Pekare vs referenser i C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-list-array-java">Konvertera lista till Array i Java</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/difference-between-wolverine">järv vs grävling</a>
</li><li><a href="/java-programs-java-programming-examples">java-program</a>
</li><li><a href="/pandas-dataframe-merge">pd sammanfoga</a>
</li><li><a href="/arp-commands">arp ett kommando</a>
</li><li><a href="/javascript-loops">javascript för loop</a>
</li><li><a href="/java-convert-double-string">java dubbel till sträng</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 Alla Rättigheter Förbehållna | <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>
</body>
</html>