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

我试过浮动：左，显示：内联，显示：块，显示：内联块等，

我还尝试删除 html li 元素之间的空格。（即把所有的 li 元素放在 html 代码的同一行）

我还尝试了 letter-spacing:0, font-size:0 for ul , li 以及 li a

它在 chrome 和 mozilla 上看起来很棒，但在 IE 中，所有 li 元素之间都有一点空间.. 好像 IE 给了它们几个 px 或其他东西的边距......而且它发生在 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 默认情况下不会导致这种行为，所以我怀疑是一些 css 影响了这些 li,a,img 元素的外观。

IE 中的图像有时有边框 - 尝试将它们设置为border: 0 none;.

如果您的列表项是内联的，则 html 标记之间的空格可以将它们分开。

于 2012-10-26T06:50:53.797 回答
0

您确定额外的空间来自 li 元素吗？我的经验是，如果图像不是“显示：块”，有时会导致奇怪的 1px 间隙......

尝试在 LI 内的图像上设置“display:block”。这可能有效:)

于 2012-10-26T06:25:23.990 回答
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 回答