2

水平ナビゲーション用の順序付けられていないリストがあります

コードはこのようなものです

   <ul class="headul">
      <li class="headli"><a href="#"><img src="Images/2_03.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_04.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_05.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_06.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_07.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_08.jpg"/></a></li>
   <li class="headli"><a href="#"><img src="Images/2_09.jpg"/></a></li>
   </ul>

CSS

     .headul {
        display:block;
        padding:0px
            }

      .headli {
        list-style:none;
        display:block;
        letter-spacing:0;
        float:left;
        border:0px;
            }

      .headli a {float:left;
            display:block; 
            letter-spacing:0;
            float:left;
            border:0;
            }

float:left、display:inline、display:block、display:inline-block などを試しました。

また、html li 要素間のスペースを削除しようとしました。(つまり、すべての li 要素を HTML コードの同じ行に配置します)

また、 ul 、 li 、および li a に対して、 letter-spacing:0, font-size:0 を試しました

クロムとモジラでは見栄えがしますが、IEではすべてのli要素の間に少しスペースがあります..あたかもIEがそれらに数ピクセルか何かのマージンを与えているかのように...さらにIE9で起こっています..（私はIEテスターを使用しています以前のバージョンの IE でテストするには、IE7 をテストすると何らかの理由でクラッシュし続けます)

4

4 に答える 4

2

画像用の新しい CSS を作成する

.headli a img
 {
    border:none;
    margin:0;
    padding:0;

 }
于 2012-10-26T06:40:42.497 に答える
1

ul の子要素に影響を与える他のスタイル ルールがないことを確認してください。IE9 はデフォルトでこのような動作を引き起こすことができないため、これらの li,a,img 要素の外観に影響を与えているのは css であると思われます。

IE の画像には境界線がある場合があります - に設定してみてくださいborder: 0 none;。

リスト アイテムがインラインの場合、html タグ間のスペースがそれらを離す可能性があります。

于 2012-10-26T06:50:53.797 に答える
0

これを試して、imgのcssを追加

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.headul {
        display:block;
        padding:0px;
        border:0px;
        margin:0px;
        }

      .headli {
        list-style:none;
        display:block;
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }

      .headli a {
        float:left;
        display:block; 
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }

      .headli a img{
        float:left;
        display:block; 
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }
</style>
</head>
<body>
 <ul class="headul">
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
   </ul>
</body>
</html>

変更前

ここに画像の説明を入力

変更後

ここに画像の説明を入力

于 2012-10-26T06:49:57.260 に答える
0

追加のスペースが li 要素から来ていることは確かですか? 「display:block」でないと画像に1pxの変な隙間ができることがある…という体験をしました。

LI 内の画像に「display:block」を設定してみてください。それはうまくいくかもしれません:)

于 2012-10-26T06:25:23.990 に答える