おそらく、分割線CSS実装を実装するための最もエレガントな方法

少し前に、プロジェクトの反復を行っていたときに、分割線を含む要件に遭遇しました。これは、ほぼこれと同じ長さでした。

次に、プロジェクトの前に分割線を実装する方法を確認しました。これは、基本的にこれで実装されました。仕方：

<div>物料下载(仅内网可下载)</div>

div{
    
    
   height: 40px;
   line-height: 40px;
   text-align: center;
   font-size: 12px;
   color: #ccc;
   position: relative;
   margin-bottom: 15px;

   &::before {
    
    
       content: '';
       position: absolute;
       left: -20px;
       top: 19px;
       z-index: 1;
       background-color: #ddd;
       width: 35%;
       height: 1px;
   }

   &::after {
    
    
       content: '';
       position: absolute;
       right: -20px;
       top: 19px;
       z-index: 1;
       background-color: #ddd;
       width: 35%;
       height: 1px;
   }
}

そこで、検索してみると、誰もがこのように境界線を認識しているように見えるので、こっそり独自の方法で「ゴージャスな」[分割線]のセットを実現しました。実装方法は次のとおりです。

<fieldset>
	<legend>物料下载(仅内网可下载)</legend>
</fieldset>

スタイルを追加しないと、次のようになります

。では、もう少しスタイルを設定しましょう。

fieldset {
    
    
  border: 0;
  border-top: 1px solid #ddd;
  text-align: center;

  legend {
    
    
    padding: 0 5%;
  }
}

Dangdangdang、これらの数行のスタイルだけで、前の計画とまったく同じ効果を提示できますが、一度に行う作業ははるかに少なくなりますか？私が作成したこのcodePenプロジェクト
で両方の実装を見ることができます。最後に、ここでタグとタグについて説明しましょう。上のスクリーンショットは、MDNでの説明と使用法です。

fieldsetlegend

フィールドセットタグが実際にグループ化スタイルを表すために使用されていることがわかります。通常、フォームでより多く使用できます。フィールドセットタグは、凡例要素だけでなく他の要素もラップできますが、凡例の表示フォームもラップできます。このグループのタイトルは同じです。当時、htmlを学んだときにこの属性を覚えていたので、これを使って分割線を実装しようと思いましたが、実際に使ったことはありません。そのスタイルはほとんどの場合私たちのUIに適合していません。デザインですが、その日の気まぐれで、試してみる姿勢で、実際にその「ベストプラクティス」を見つけました、ハハハ、みんなにお勧めします〜

また、私をフォローし、一緒に学び、一緒に進歩することを歓迎します。

ステーションB（基本的に10分以内に制御される短いビデオカテゴリ、小さな知識ポイントを明確に説明します）：WebフロントエンドaliveAmy

CSDN：aliveAmy

ナゲッツ（私はこれまでナゲッツをあまり使用していませんが、将来更新します）：aliveAmy

ご不明な点がございましたら、メールでお問い合わせください。メールをご覧になりましたら、[email protected]までご返信いたします。