Html 为什么<；a>；图像_Html_Css

Html 为什么<；a>；图像

html css

Html 为什么<；a>；图像,html,css,Html,Css,有人能解释为什么我看到两个破折号（或下划线）之间我的图像，像这样：如何移除它们这种奇怪的行为出现在chrome（linux）、safari（mac）以及firefox（mac）中 ulli{ 显示：内联； } 这是因为它被包装在一个链接中。您必须使用CSS删除下划线 .MyList不带下划线a{ 文字装饰：无； } .我是李先生{ 显示：内联； } 只需在CSS中的a标记上设置文本装饰：none a{ text-decoration: none;

有人能解释为什么我看到两个破折号（或下划线）之间我的图像，像这样：

如何移除它们

这种奇怪的行为出现在chrome（linux）、safari（mac）以及firefox（mac）中


ulli{
显示：内联；
}

这是因为它被包装在一个链接中。您必须使用CSS删除下划线

.MyList不带下划线a{
文字装饰：无；
}
.我是李先生{
显示：内联；
}

只需在CSS中的

标记上设置

文本装饰：none

a{
  text-decoration: none;
}

按照HTML的编写方式，浏览器将锚样式应用到的

之前的

后面有空格（下划线）

实际上，我建议做一些类似（CSS）

img{display:block；float:left；}

的事情，它不是下划线，而是链接的下划线。请注意您的标记：

<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
</a>

和/或您可以更改样式：

a {
    text-decoration: none;
}

您需要以下html：

<a ...><img /></a>
       ^------^---- no spaces/linebreaks.


^------^----没有空格/换行符。

html源中的换行符呈现为空格字符。因此，标准的链接/下划线显示将超出图像边缘的宽度，即换行符所呈现的空间。

下划线是由浏览器在图像后面、关闭标记之前注册一个空间造成的。为了抵消这一点，您需要删除缩进：

<html>
<head>
    <style type="text/css" media="screen">
        ul li {
            display: inline;
        }
    </style>
</head>
<body style="background: none;">
    <ul class="">
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
    </ul>
</body>
</html>


ulli{
显示：内联；
}

另写为

（或视情况而定）-也就是说，将元素对接起来，这样就没有额外的文本节点。下划线显示了一个潜在的问题。它们是链接。可能是

之间的换行符造成的空格。请记住-html呈现程序将html源代码中的换行符视为空白字符，并将其呈现为空格。之间的空格不重要，和之间发生的事情非常重要，渲染引擎可以解决不一致的问题，如果确实遇到错误，则将其报告为错误。我省吃俭用地写下自己的答案。但是，让我添加我已经创建的bin：查看第一个图像，其中删除了图像前后的空白（下划线消失）。查看最后一张图片，其中空白也已从列表项中删除（空白消失）哇，您是如何添加“运行复制”按钮的？您必须使用“插入代码段”按钮。或者添加一些内联注释。只需单击“编辑”查看标记。

<html>
<head>
    <style type="text/css" media="screen">
        ul li {
            display: inline;
        }
    </style>
</head>
<body style="background: none;">
    <ul class="">
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
    </ul>
</body>
</html>