如何在HTML中創建部分水平線？

Question

我想在網頁中的主標題下方創建一條細線，該網頁居中，如this。我如何去做，因爲使用/hr將創建一個端到端的線。

Answer 1

在your example這個例子是使用CSS和沒有做與hr-tag 所以要麼你可以使用CSS樣式border-bottom作爲你的例子，或者你確實可以使用你給一些CSS的小時標籤，例如：

<hr style="width:40%"> 

如果要定位hr，則可能需要position-style。 你可以在w3c example site上輕鬆地試試這個。

請記住，hr-width-attribute（不是風格！）不再在html5下工作了。

Answer 2

可以調整HR寬度

<hr width="50%"> 

或者在你給它使用div的CSS屬性與底邊框

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

Answer 3

可以restyle並添加保證金您小時

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>

寬度固定寬度的保證金參與過

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>

您還可以使用任何標籤的底部邊框...

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

您可以使用HR標籤或標籤HR與簡單的CSS代碼

的Html標籤HR：

<center>Your Code Here</center> 
 

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

這裏HR標籤用簡單的CSS代碼：

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

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

注： 未在HTML5規範支持的屬性都與標籤的外觀。應該在CSS中設置外觀，而不是在HTML本身中。

因此，使用不帶屬性的<hr>標籤，然後在CSS中對其進行設置，使其以您想要的方式顯示。

Answer 5

HTML：

---

CSS： 。 hr顏色：＃222 }