代码之家 › 专栏 › 技术社区 › Tom Kidd

为什么小空间总是出现在我的网页上?

layout css html

Tom Kidd · 技术社区 · 16 年前

这可能是一个愚蠢的问题,但如果有更好或适当的方法来做这件事,我很想学习它。

我已经多次遇到这种情况,包括最近在我的HTML页面的呈现版本中出现了小空间。直观地说,我认为这些不应该存在,因为在文本或实体之外,页面HTML的格式不应该重要,但显然是这样。

我指的是这个-我从客户那里得到了一些关于他们希望他们的网站如何看起来的photoshop文件。他们希望它看起来基本上是像素完美的图像在这个文件。

页面中的一个地方需要一个菜单栏,其中每个菜单栏在悬停时都会改变位置,就像一个超链接,等等。在Photoshop文件中,这是一个长的栏,因此,一个简单而便宜的方法就是将该段分割成多个图像,然后将它们放在文件中彼此相邻的位置。

所以我本能地把它摆成这样(还有更多的东西,但这是要点)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

诸如此类。

问题是图像之间有这么小的空间,这是不可接受的,因为客户希望这个东西像素完美(它只是普通的看起来不好)。

使其正确呈现的一种方法是移除图像之间的回车。

<a href=“page1.html”>
<img src=“image1.png”/>
& lt;/a & gt;
<a href=“page2.html”>
<img src=“image2.png”/>
& lt;/a & gt;
<a href=“page3.html”>
<img src=“image3.png”/>
& lt;/a & gt;

这使得图像彼此正好相反(理想的效果),但它使行难以置信地长,代码更难维护(它包装在这里,这是一个简化的版本-真正的版本有更长的文件名和javascript来做悬停)。

在我看来,这不应该发生,但看起来HTML中的回车被呈现为一个小的空白空间。这在所有浏览器中都会发生,看起来像。

我认为上面的两个片段应该呈现相同,是对还是错?我做错什么了吗?可能是用错误的编码保存了文件?我应该让这些链接中的每一个都成为一个位置完美的css元素吗?

7 回复 | 直到 7 年前

rslite 16 年前

在所有浏览器中,空白(包括回车)通常呈现为空格。

你需要一个接一个地放置元素,但是你可以使用一个技巧:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

这看起来也有点难看,但还是比一条线好。您可以更改格式,但其想法是在元素内部添加回车,而不是在元素之间添加回车。

Adam Bellaire 16 年前

我不知道这对你的页面来说是否足够笼统,但你可以将这些特殊的一标记并将它们全部向左浮动,然后不管HTML的格式如何,它们都会聚集在一起。

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

Kyle Burton 16 年前

这是HTML规范的一部分-空格在标记中,因此它们被视为文档的一部分。

由于您不喜欢这种格式,所以您只有另外一个选择,那就是打破HTML标记:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

在我看来,这是不可取的,或者动态地创建HTML——通过JavaScript或者使用模板系统和动态HTML。

Tomalak 16 年前

原因很简单:在HTML中,空白很重要,但只有一次。忽略重复的空白,只显示第一个空白。

唯一可靠的避免这种情况的方法是,像您所做的那样,在元素之间不放置空白。

当基于表的布局小于当前布局时,可以使用零边框、零填充的表来对齐元素,同时在源代码中将它们放在单独的行上。

Matthew Rapati 16 年前

我处理这个问题的方法是使用无序列表,并使每个图像/链接都成为一个项目。然后使用css以内联方式显示每个项,并将它们浮动到左侧。

这将给您更多的灵活性,并使标记非常可读。

Tomalak 16 年前

当浏览器将回车视为空格时,上面演示的行为是正确的。要修复它,您可以使用以下样式:

a { display: block; float: left; }

请注意,上面的规则适用于所有链接,因此您可能只希望将选择器缩小到某些元素,即:

#nav a { display: block; float: left; }

Dan Udey 16 年前

如果你要在一个网站上做一个标签式的界面,那么一定要花很大的精力去做,这是值得的。有很多网站都有很好的CSS选项卡实现示例。考虑使用其中一个。

This one 有很多css+javascript/ajax选项卡。或看到 this set of simple CSS examples (有些风格)。最后,看看这个真的很酷 tabs generator .