css中如何設置分割線

本篇文章為大家展示了css中如何設置分割線，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

10年積累的成都做網站、成都網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有臨安免費網站建設讓你可以放心的選擇與我們合作。

使用原生HTML+CSS制作一個分割線

代碼如下：

<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>

效果如下圖所示：

css中如何設置分割線