2017-08-09 35 views
-3

我是一個初學者/學習者,使用HTML & CSS。HTML/CSS下的文本行

如何在一些文本下放一行?

我不希望強調的文本,但我要讓沿着這

image

我如何可以實現此線的東西?

回答

1

只需使用一個<hr></hr>標籤

示例代碼:

<body> 
 
     <h1> Header</h1> 
 
     <hr> 
 
     <p> text under header </p> 
 
    </body>

+0

但我想使其更小,那麼所有的頁面 – Burgo

+0

退房W3Schools的,他們有一個偉大的頁面充滿對這樣的東西,信息的... https://www.w3schools.com /tags/tag_hr.asp – Travis

+1

'


'是一個獨立標籤。 – Huelfe

3

您可以使用<hr>標籤。

下面是一些例子造型不錯頁:https://css-tricks.com/examples/hrs/

如果你想讓它容器的只有80%的寬度可以按如下

hr { 
 
    width: 80%; 
 
}
<hr>

添加一些CSS
+0

好的,謝謝,我明白 – Burgo

+0

你也可以通過使用CSS屬性,border-bottom。 –

2

如果您試圖控制線條的大小,您可以使用CSS。

hr { 
 
    display: block; 
 
    margin-top: 0.5em; 
 
    margin-bottom: 0.5em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-style: inset; 
 
    border-width: 1px; 
 
}
<h1>HTML</h1> 
 
<p>HTML is a language for describing web pages.....</p> 
 

 
<hr> 
 

 
<h1>CSS</h1> 
 
<p>CSS defines how to display HTML elements.....</p>

你可以做的另一件事是寄宿底

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
p { 
 
    border-style: solid; 
 
    border-bottom: thick line #ff0000; 
 
    border-top: none; 
 
    border-left: none; 
 
    border-right: none; 
 
    width: 250px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>This is some text in a paragraph.</p> 
 

 
</body> 
 
</html>

1

您可以通過CSS使用hr標籤和風格吧:

.x { 
 
    width: 40%; 
 
    float: left; 
 
}
<h1>Test</h1> 
 
<hr class="x">

+0

謝謝我會再次嘗試 – Burgo

+0

小時?已經回答:) –

+0

它不是在另一個答案中左對齊,即不完全在文本下 – Johannes