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

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

WBOY

リリース： 2016-06-21 09:21:19

オリジナル

1128 人が閲覧しました

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="" (<%#DataBinder.Eval(Container.DataItem, "HIT")%>)
/li> ;FooterTemplate>

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

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

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

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

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

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

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

title ;/span> ;(222)

{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><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</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><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> <li><a href="article/1.html" title="标题">标题</a> (222)</li> </ul> </div></body></html>
ログイン後にコピー
ログイン後にコピー

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