多くのプロジェクトでは、中央に灰色の分割線があり、両側に分割線がないグリッド表示の機能を実装する必要があります。 図に示すように: 一般的な考え方に従って、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 文字列分割の例 (区切り文字なしの文字列抽出)
サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...
目次1. 計算プロパティ構文: 1. 省略形:文法: 2. 文章を完成させる: 2. モニタリング(...
1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...
複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...
効果: CSS スタイル: <スタイル タイプ="text/css">...
目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...
この記事では、参考までに、製品拡大鏡を実装するためのJavaScriptの具体的なコードを紹介します...
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...
HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...
MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...
1. チューニングの必要性 私は、どのように書けばいいのか本当に分からないので、共有するために最適...
zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...
この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...
Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...
目次1. はじめに2.これを理解する3. これは誰ですか? 4.矢印関数はさらに読む要約する1. は...