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="//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="/webtech-tools/">Webtech-Verktyg</a> </li><li> <a href="/all-interview/">Alla Intervjuer</a> </li><li> <a href="/android/">Android</a> </li><li> <a href="/java-timer-class/">Java Timer Klass</a> </li><li> <a href="/excel-basics/">Excel-Grunderna</a> </li><li> <a href="/bucketsort/">Bucketsort</a> </li><li> <a href="/bubblesort/">Bubblesort</a> </li><li> <a href="/anime/">Anime</a> </li><li> <a href="/c-programs/">C-Program</a> </li><li> <a href="/banking-general-awareness/">Allmän Medvetenhet Om Bankverksamhet</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">Vad är den fullständiga formen av OP</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> OP Full Form med Organizational Full Forms, Political Full Forms, Technology Full Forms, Telecom Full Forms, Diverse Full Forms, Tentamen, förklaringar, definitioner, IT, fullständigt namn etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-full-form-op"> <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="/what-does-istg-mean">Vad betyder 'ISTG'? På Instagram, WhatsApp, TikTok</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-css">Skillnaden mellan CSS och SCSS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-deoxyribose">Skillnaden mellan deoxiribos och ribos</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/html-size-attribute">HTML-storleksattribut</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-language/">C -språk</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="/doubly-linked-list">dubbelt länkad lista</a>
</li><li><a href="/java-convert-string-int">sträng till heltal i java</a>
</li><li><a href="/java-jtable">javatable</a>
</li><li><a href="/advantages-disadvantages-electricity">fördelarna med elektricitet</a>
</li><li><a href="/java-color-codes">java färger</a>
</li><li><a href="/python-string-isnumeric-method">python är numeriskt</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="//sl.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>
<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>