CSS 换行问题答案

【问题标题】：CSS new line issuesCSS 换行问题
【发布时间】：2010-06-11 07:10:10
【问题描述】：

我正在尝试创建一个微风浏览器模板（用于在本地生成图片库，输出 HTML）。我从我的 wordpress 模板中获取了 HTML，并设法生成了以下图库http://uploads.peasyphotos.com/20100607t-candids/gallery/，但每张图片都换了一行，我不知道为什么，我认为它在 CSS 中。我应该在 CSS 中寻找什么来尝试阻止这种情况，或者我可以在我的模板代码周围放置什么来禁用该部分的 CSS？

谢谢

【问题讨论】：

标签： html css layout templates

【解决方案1】：

所以我有一个可能的答案给你。

首先你必须将这个 css-styles 添加到图片的 a 标签中：

display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;

它适用于 Firefox 3.6。我不确定它是否适用于我们的 lovley IE：P

希望能帮到你！

【讨论】：

【解决方案2】：

在您的 css 文件中，您有一个名为 reset.css 的文件。在第 57 行，有一行称为显示块。评论出来看看。可能不是一个很好的观点。但图像不会进入下一行。

【讨论】：

【解决方案3】：

对于具有照片的锚元素，请像这样使用浮动。这会很小心。

float:left;

【讨论】：

【解决方案4】：

您的图像父锚标记没有正确的 css。将类图像放在锚标签上，并为它们使用以下 css。

a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}

【讨论】：

【解决方案5】：

首先我会推荐validating your html。

其次，我建议将图像放在某种容器元素中：可能是无序列表。像这样让一系列链接相互运行，没有分隔非空白字符，存在严重的可访问性问题。

第三，我会在列表中使用一个 css 类，并将其设置为：

ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}

【讨论】：