HTML での Li タグの使用例

HTML での Li タグの使用例

タイトルを左に、日付を右に揃えたいのですが、日付の範囲に float:right を直接追加すると、IE8 と FF では問題ありませんが、IE6/7 では折り返されてしまいます。ここでは、シンプルで効果的な解決策を紹介します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >     
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >     
  3. <ヘッド>   
  4.     <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8"   />   
  5.     <タイトル> </タイトル>   
  6. <スタイル>   
  7. <!--
  8.   
  9. #mylist { 幅:400px; リストスタイルタイプ:なし; 余白:0; パディング:0; }
  10. #mylist li span {
  11. フロート:右;
  12. }
  13. -- >     
  14. </スタイル>     
  15. </ヘッド>     
  16. <本文>     
  17. < ul   id = "マイリスト" >   
  18.   
  19.          < li > < span > 2011-12-2 </ span > Web 開発者ネットワーク (Admin10000.com) </ li >   
  20.          < li > < span > 2011-12-2 </ span > Web 開発者ネットワーク (Admin10000.com) </ li >   
  21.          < li > < span > 2011-12-2 </ span > Web 開発者ネットワーク (Admin10000.com) </ li >             
  22. </ ul >   
  23.   
  24. </本文>     
  25. </html>​​     

注: span は Li タグの先頭に記述する必要があります。これにより、IE6/IE7/FF3.5 より前のバージョンでは、span 内の日付が右揃えになります。

<<:  Docker ベースのよく使われる CentOS7 イメージの概要

>>:  MySQL の時間タイプとモードの詳細

推薦する

Windows Server 2012 でデスクトップ上の一般的なアイコンを表示または非表示にする方法

Windows Server 2012 と Windows Server 2008 では、デスクトッ...

Docker で ElasticSearch と Kibana をインストールするためのサンプル コード

1. はじめにElasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを...

データページング効果を実現する js オブジェクト

この記事の例では、データのページング効果を実現するためのjsオブジェクトの具体的なコードを参考までに...

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...

HTMLはシンプルで美しいログインページを作成します

まずは見てみましょう。 HTML ソースコード: XML/HTML コードコンテンツをクリップボード...

vue3とvue2の利点の比較

目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例

Mybatis ページングプラグイン pageHelper の詳細な説明と簡単な例動作フレームワーク...

JavaScript でツリー構造を構築するための効率的なアルゴリズムについての簡単な説明

目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...

MySQLが間違ったインデックスを選択する理由と解決策

MySQL では、テーブルに複数のインデックスを指定できますが、ステートメントの実行時に、使用するイ...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

SQL文におけるGROUP BYとHAVINGの使用に関する簡単な説明

GROUP BY 句と HAVING 句を紹介する前に、まず SQL 言語の特殊な関数である集計関数...

jquery+springbootでファイルアップロード機能を実現

この記事の例では、ファイルアップロード機能を実現するためのjquery+springbootの具体的...

Reactの状態管理の3つのルールのまとめ

目次序文No.1 焦点No.2 複雑な状態ロジックの抽出No.3 複数状態操作の抽出要約する序文Re...

H5でクリックされたときにaタグの背景色をキャンセルする方法

1. モバイル端末でクリックされたときにタグの青色を解除する { -webkit-tap-highl...