Heim >Web-Frontend >CSS-Tutorial >So legen Sie eine Trennlinie in CSS fest
So legen Sie eine Trennlinie in CSS fest
- 藏色散人Original
- 2021-05-13 14:23:2715021Durchsuche
So legen Sie die Trennlinie in CSS fest: Erstellen Sie zunächst eine HTML-Instanzdatei. Erstellen Sie dann drei Divs im Hauptteil. Legen Sie schließlich den Stil des zweiten Divs auf „padding-top:3px;width:40%;border-top“ fest : 1px solid #666666;“ reicht aus.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Verwenden Sie natives HTML + CSS, um eine Trennlinie zu erstellen
Der Code lautet wie folgt:
<html>
<title>分割线</title>
<body>
<div>
<span>设备：</span>
<span>1</span>
</div>
<div class="order">
<span style="white-space:pre"> </span><span class="line"></span>
<span style="white-space:pre"> </span><span class="txt">这里是一个分割线</span>
<span style="white-space:pre"> </span><span class="line"></span>
</div>
<div>
<span>设备：</span>
<span>2</span>
</div>
<style type="text/css">
.order {
height: 20px;
line-height: 20px;
text-align: center;
}
.order .line {
display: inline-block;
padding-top : 3px;
width: 40%;
border-top: 1px solid #666666;
}
.order .txt {
color: #333333;
font-size: 12px;
vertical-align: middle;
}
</style>
</body>
</html>Der Effekt ist wie folgt:
Teilen von Lernvideos: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo legen Sie eine Trennlinie in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!