CSS3 天子グリッドリストのスタイルの書き方

CSS3 天子グリッドリストのスタイルの書き方

多くのプロジェクトでは、中央に灰色の分割線があり、両側に分割線がないグリッド表示の機能を実装する必要があります。

図に示すように:

一般的な考え方に従って、li の幅を設定し、nth-of-type(n){} を通じて li タグにスタイルを追加します。

各 li の幅を 33.33% に設定しましたが、1 ピクセルの境界線を追加すると、右端のコンテンツが押し下げられます。

これは、親 ul に :before :after 疑似クラス要素を追加することで実現できます。 liの幅を占有せずに

3列を表示する場合は、ulに:beforeを追加することで実現します。

CS

<スタイル>
        ul li{ リストスタイル: なし;}
        .mp-リスト{   
            位置: 相対的;
            オーバーフロー: 非表示;
            zインデックス: 0;
            背景色: #fff;
        }        
        .mp-list:before {
            コンテンツ: '';
            位置: 絶対;
            幅: 33.33%;
            左: 33.33%;
            高さ: 100%;
            左境界線: .02rem 実線 #ddd;
            右境界線: .02rem 実線 #ddd;
        }
        .mp-リスト li {
            幅: 33.33%;
            高さ: 2rem;
            行の高さ: 2rem;
            フォントサイズ: .28rem;
            テキスト配置: 中央;
            ボーダー下部: .02rem 実線 #ddd;
            下マージン: -1px;
            フロート: 左;
            位置: 相対的;
            zインデックス: 10;
            色: #212121;
        }
        .mp-list li a {
            色: #212121;
            表示: ブロック;
            オーバーフロー: 非表示;
            テキストオーバーフロー: 省略記号;
            空白: ラップなし;
            フォントサイズ: .28rem;
        }
    </スタイル>

html

<ul class="mp-list">
    <li><a hybrid-link="" href="" title="">香港</a></li>
    <li><a hybrid-link="" href="" title="">マカオ</a></li>
    <li><a hybrid-link="" href="" title="">台湾</a></li>
    <li><a hybrid-link="" href="" title="">バンコク</a></li>
    <li><a hybrid-link="" href="" title="">シンガポール</a></li>
    <li><a hybrid-link="" href="" title="">ソウル</a></li>
    <li><a hybrid-link="" href="" title="">東京</a></li>
    <li><a hybrid-link="" href="" title="">済州島</a></li>
    <li><a hybrid-link="" href="" title="">パタヤ</a></li>
</ul>
4列表示の場合は、:afterにスタイルを追加します。liの幅と.mp-list:beforeの位置を変更する必要があることに注意してください。
.mp-list:after {
    コンテンツ: '';
    位置: 絶対;
    幅: 10%;
    左: 75%;
    高さ: 100%;
    左境界線: .02rem 実線 #ddd;
    右境界線: 0;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Web デザインのための 5 つのシンプルな XHTML Web フォーム

>>:  MySQL 文字列分割の例 (区切り文字なしの文字列抽出)

推薦する

Mysql クラシック高レベル/コマンドライン操作 (クイック) (推奨)

サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...

Vue の計算プロパティとプロパティリスニングについての簡単な説明

目次1. 計算プロパティ構文: 1. 省略形:文法: 2. 文章を完成させる: 2. モニタリング(...

MacでのMySQL5.7.22のインストール手順

1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

効果: CSS スタイル: <スタイル タイプ="text/css">...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

製品の拡大鏡効果を実現する JavaScript

この記事では、参考までに、製品拡大鏡を実装するためのJavaScriptの具体的なコードを紹介します...

vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル

vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...

HTML の基本概要推奨事項 (段落)

HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

Nginx の高同時実行最適化の実践

1. チューニングの必要性​ 私は、どのように書けばいいのか本当に分からないので、共有するために最適...

MySQL 最適化 Zabbix パーティション最適化

zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...

3Dカルーセル効果を実現するjs

この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...

CentOS 8 に Postfix メール サーバーをインストールして設定する方法

Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...

JavaScriptの詳細な説明 thisキーワード

目次1. はじめに2.これを理解する3. これは誰ですか? 4.矢印関数はさらに読む要約する1. は...