ホームページ > 記事 > ウェブフロントエンド > li と背景の間の位置ずれの問題 image_html/css_WEB-ITnose

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

WBOYオリジナル: 2016-06-21 09:21:191128ブラウズ

html:
25edfb22a4f469ecb59f1190150159c6144210b673e8dc7c992e22d6b529ece4715d2122c99bd46dda92662681dd7418title5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114 ; 8ff5b45e84d050a8759218e3a991e13a(222)54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb

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;}

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

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

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

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

bfe0ed25a3c2b85ee9a4334fd73060c1
0447004dee63c7cebf97ef88cee687b2 6ee8e8fba390ed9254dc3617352f893239318b6f72ed39310530dfd69d0078e1最近の注目コメント45a2772a6b6107b401db3c9b82c049c246eb22d0a433f22cff9940d34d5612bf ;
14264b83dfe20be849cbbb99d9b0de89
0fc5c90f257c8bbe709da427d559475b 25edfb22a4f469ecb59f1190150159c6/.html" title="" 8ff5b45e84d050a8759218e3a991e13a(18dc24cb5e9cccbfa18424c56c85adb8)54bdf357c58b8a65c66d7c19c8e4d114
/li> ;FooterTemplate>9edaf7e6b2de27ae303e2ddf57349448
16b28748ea4df4d9c2150843fecfba68
8ff5b45e84d050a8759218e3a991e13a(222)54bdf357c58b8a65c66d7c19c8e4d114 と同じです、次は line-height を調整することです

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

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

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

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

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

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

72c84b063bbd7e5a41f6f1352ea76314ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf5932144210b673e8dc7c992e22d6b529ece4715d2122c99bd46dda92662681dd7418title5db79b134e9f6b82c0b36e0489ee08ed ;/span> ;8ff5b45e84d050a8759218e3a991e13a(222)54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb

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

<!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>

ありがとうございます。私の fontgray フォントもワンサイズ大きい必要がありました。ずっと同じサイズだと思ってました

声明：

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

前の記事：初心者は方法を学んでいます。問題が発生した場合は、help_html/css_WEB-ITnose について専門家に問い合わせてください。次の記事：初心者は方法を学んでいます。問題が発生した場合は、help_html/css_WEB-ITnose について専門家に問い合わせてください。

続きを見る

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

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

関連記事