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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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><!--//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="/web-technologies-difference-between/">Webbteknik - Skillnad Mellan</a> </li><li> <a href="/technical-scripter-2022-cat/">Technical Scripter 2022</a> </li><li> <a href="/algorithms-backtracking/">Algoritmer-Backtracking</a> </li><li> <a href="/blogathon-2021-cat/">Blogathon-2021</a> </li><li> <a href="/physics-class-12-cat/">Fysik-Klass-12</a> </li><li> <a href="/english-word-play/">Engelska-Ord-Lek</a> </li><li> <a href="/java-interfaces/">Java-Gränssnitt</a> </li><li> <a href="/c-storage-classes-type-qualifiers/">C-Lagringsklasser Och Typkvalificeringar</a> </li><li> <a href="/computer-gk/">Dator Gk</a> </li><li> <a href="/spring-cloud-tutorial/">Handledning För Vårmoln</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Att hantera nätmobbning i skolan</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Skolor har blivit anpassade till att hantera mobbning. Men precis som en aspekt av mobbning hanteras måste de klara av nätmobbning i skolor.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/dealing-with-cyberbullying-schools-242118"> <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="/kadanes-algorithm">Kadanes algoritm</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/hashset-c">HASHSET I C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-address-an-envelope-photos-included-1311466">Hur man adresserar ett kuvert (foton ingår!)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/relative-frequency-formula">Relativ frekvens: formel, definition och hur man hittar relativ frekvens</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-zeros-one-billion">Hur många nollor på en miljard</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="/sql-server-pivot">sql server pivot</a>
</li><li><a href="/java-math-class">java matematik klass</a>
</li><li><a href="/if-poem-rudyard-kipling-summary-line-line-explanation-english">om av rudyard kipling rad för rad förklaring</a>
</li><li><a href="/difference-between-type-casting">typkonvertering och gjutning i java</a>
</li><li><a href="/tcp-vs-udp">tcp vs udp</a>
</li><li><a href="/python-s-string-formatting">vad är s i python</a>
</li><li><a href="/list-cities-usa">namn på usa stad</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="//bg.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>