Come creare una linea parziale orizzontale in HTML?

Question

Vorrei creare una linea sottile sotto l'intestazione principale in una pagina Web, che è centrata, qualcosa come this. Come faccio a farlo mentre usa /hr creerà una linea end-to-end.

Answer 1

In your example questo è fatto con i CSS e non con un hr-tag Quindi puoi usare lo stile css border-bottom come nel tuo esempio, oppure puoi usare un hr-tag che dai un po 'di CSS, es:

<hr style="width:40%"> 

Se si desidera posizionare l'ora, potrebbe essere necessario il position-style. Si può provare facilmente su w3c example site.

Ricorda che lo hr-width-attribute (non lo stile!) Non funziona più in html5.

Answer 2

È possibile regolare la larghezza HR

<hr width="50%"> 

O nel esempio che ha dato esso utilizza proprietà CSS del div con un bordo inferiore

#yourDiv { 
    border-bottom: 1px solid gray; 
} 

Answer 3

si può restyle e aggiungere il margine al tuo hr

hr { 
 
    border:none; 
 
    border-top:1px solid;/* or bottom */ 
 
    margin:1em 15%; /* 15% or whatever fixed or % value that suits your needs*/ 
 
    } 
 

 
body {text-align:center;}

<h1>Any content before</h1> 
 
<hr/> 
 
<p>any content after</p>

larghezza A margine di larghezza fissa è coinvolto anche

hr { 
 
    border:none; 
 
    border-top:1px solid;/* or bottom */ 
 
    margin:1em auto; 
 
    width:17em; 
 
    } 
 

 
body {text-align:center;}

<h1>Any content before</h1> 
 
<hr/> 
 
<p>any content after</p>

È inoltre possibile utilizzare il border-bottom di qualsiasi tag ...

h1 { 
 
    border-bottom:1px solid; 
 
    padding-bottom:0.5em; 
 
    display:table; /* to fit to content's width else margin or a fixed width works too */ 
 
    margin:1em auto; /* if not display:table use width or margin values as first snippet */ 
 
    } 
 

 
body {text-align:center;}

<h1>Any content before</h1> 
 
<p>any content after</p>

Answer 4

È possibile utilizzare tag HR o tag HR con un semplice codice CSS

Html tag HR:

<center>Your Code Here</center> 
 

 
<hr align="center" width="50%">

Qui tag HR con semplice codice CSS:

hr { 
 
width: 50%; 
 
margin-left: auto; 
 
margin-right: auto; 
 
}

<center>Your sample code here</center> 
 
<hr>

Nota: Gli attributi che non sono supportate nelle specifiche HTML5 sono tutti legati alla comparsa del tag. L'aspetto dovrebbe essere impostato in CSS, non nel codice HTML stesso.

Quindi utilizzare il tag <hr> senza attributi, quindi modificarlo in CSS affinché appaia come si desidera.

Answer 5

HTML:

---

CSS: . hr { larghezza: 50% colore: # 222 }