li と背景の間の位置ずれの問題 image_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

li と背景の間の位置ずれの問題 image_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:21 AM

html:

title ; (222)

css:
ul,li {margin:0;padding:left;}
。 {text-align:left;margin:20px 10px 10px 0px;}
.hot ul{background:url(../images/u118_main_bg.gif) -858px 7px no-repeat;padding-left:25px;}
. li{ line-height:26px;list-style:none;}

すべての数字は背景にあります。元々は (222) はありませんでした。一部のコンテンツは配置されました。以前は配置されていましたが、追加後は位置がずれるようになりました。解決方法を教えてください。

ディスカッションへの返信（解決策）

コードの投稿が少なすぎます

CSS スタイルはここまでで、HTML は次のようになります

最近の注目コメント

;

/.html" title="" ()
/li> ;FooterTemplate>> ;

(222) と同じです、次は line-height を調整することです

(222) テキストのフォントサイズは前のものと同じに設定され、次のものは行の高さを調整することです

フォントサイズは同じで、行の高さが追加されましたが、同じです

すべてのコードを貼り付けます

すべてのコードが変更されました投稿されたHTMLのものはそれですリピーターでは、対応するCSSは上記のものです
他のものは関係ありません

ページ全体のコードを投稿する必要はありません

これを試してみてください

title ;/span> ;(222)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>ul,li {margin:0;padding:0; text-align:left;}.hot{text-align:left;margin:20px 10px 10px 0px;}.hot li{ line-height:26px;list-style:none;}.hot{background:url(file:///C|/Users/Administrator/Desktop/QQ%E6%88%AA%E5%9B%BE20141112135229.png) 0 5px no-repeat;padding-left:25px;}</style></head><body><div class="hot">    <ul>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    </ul>  </div></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>ul,li {margin:0;padding:0; text-align:left;}.hot{text-align:left;margin:20px 10px 10px 0px;}.hot li{ line-height:26px;list-style:none;}.hot{background:url(file:///C|/Users/Administrator/Desktop/QQ%E6%88%AA%E5%9B%BE20141112135229.png) 0 5px no-repeat;padding-left:25px;}</style></head><body><div class="hot">    <ul>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    <li><span class="fontsblue"><a href="article/1.html" title="标题">标题</a></span> <span class="fontgray">(222)</span></li>    </ul>  </div></body></html>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。