ホームページ > ウェブフロントエンド > htmlチュートリアル > ul liはテーブルproblem_html/css_WEB-ITnoseを実装します

ul liはテーブルproblem_html/css_WEB-ITnoseを実装します

WBOY
リリース: 2016-06-24 12:19:17
オリジナル
1177 人が閲覧しました

css

我想用ul+li实现表格功能,代码如下


  
  
  
  





  • aaa

  • bbb

  • ccc

  • ddd

  • eee

  • fff

  • ggg

  • hhh

  • iii

  • jjj

  • kkk

  • lll







問題は、最後の行が 10 列未満であるため、ページに空白が存在することです。見た目は悪くなりますが、どうやって埋め合わせますか?それを解決するにはCSSメソッドを使用するのが最善です


ディスカッション(解決策)に返信します

空のliを生成してそれを埋めます

いいえ、テーブルを使用するとliを削除する可能性があるため、データを表示するためにliを使用します。 , データを削除した後、後続のセルを前方に自動的に追加することができないため、空の li を使用する場合、追加するときに余分な空の li を削除し、不足しているものを追加する必要があることを考えました。空リを削除する際、空リが10個以上あるかどうか数えるのが面倒なのでCSSを使って解決したいです

CSSでは解決できないようなのでJSでしか解決できません。判断を下す。

ulの境界線は必要なく、liの境界線を直接追加するだけです

専門家はいますか?

ul {

リストスタイル: なし;

ボーダー上: ソリッド 2px

}
浮動小数点: 10%; ;
border-right:solid 2px red;
border-bottom:solid 2px red
}

推奨されない方法です
セルの最後の行は追加されていません

専門家、助けてください。

誰か知っていますか?

私は非常に恥知らずな方法、背景写真を持っています。テーブルのワイヤーフレームの線を描画し、それを垂直方向に繰り返し、それを背景画像全体として使用し、すべての LI 境界線などをキャンセルします。

LIの間隔と行間を自分でマスターし、背景画像の「セル」にすべてのデータを入れます。

その後、JS を使用して好きなだけ LI を追加または削除できます。すべて削除すると、このテーブルもそこに表示されます。

CSSだけでは明らかに解決できません。 CSS は常にパフォーマンスのみを目的としており、判断を下すことはできません。

私は非常に恥知らずな方法、背景写真を持っています。テーブルのワイヤーフレームの線を描画し、それを垂直方向に繰り返し、それを背景画像全体として使用し、すべての LI 境界線などをキャンセルします。


LIの間隔と行間を自分でマスターし、背景画像の「セル」にすべてのデータを入れます。

その後、JS を使用して好きなだけ LI を追加または削除できます。すべて削除すると、このテーブルもそこに表示されます。
この方法を試すことはできますが、変更を加える必要があります。それは描かれた背景の線ではなく、一晩またはブロック全体です。また、背景画像を作成する際は、背景画像の引き伸ばされたサイズに注意する必要があるため、高さを自分で固定する必要があります。そうしないと、背景が引き伸ばされた後に行の高さも変わります

それを行う方法はありません。これは恥知らずです。問題が解決する限り。実際、このアイデアは非常にユニークです。

私は非常に恥知らずな方法、背景写真を持っています。テーブルのワイヤーフレームの線を描画し、それを垂直方向に繰り返し、それを背景画像全体として使用し、すべての LI 境界線などをキャンセルします。

LIの間隔と行間を自分でマスターし、背景画像の「セル」にすべてのデータを入れます。

その後、JS を使用して好きなだけ LI を追加または削除できます。すべて削除すると、このテーブルもそこに表示されます。

めんどくさいのが本来の目的ですが、どんどん複雑になっていきます

専門家に手伝ってもらいましょう


tdの追加と削除はtable jsを使います。

jsコードもすぐに使われるようになるでしょう!

jsコードもすぐに使えるようになるでしょう!

わかりません、なぜ table を直接使用しないのですか?

わかりません、なぜ table を直接使用しないのですか?

table を使用すると、データを表示するために li を使用します。データを削除すると、以降のセルの内容が自動的に入力されます

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート