Question

我正在为朋友修改一个Blogger网站，它是自定义构建的，因此它不适合博客帮助部分。

我希望它有一个特定的HTML / CSS问题，而且有人可以提供帮助。

我正在使用已经发布的帖子中的缩略图设置菜单列表。到目前为止，我有缩略图工作，但我似乎无法正确调整CSS的布局，我不知道我错过了什么。

基本上我希望缩略图并排排列，并在中心下面包含标题，如果需要，可以包含2行。

我的问题是：我似乎无法将缩略图并排放置。我似乎无法减少缩略图之间的垂直空间 3.如果可能的话，我想让文字放在缩略图下面。 4.最后，我想修复缩略图的左对齐，使它们与上面的标题对齐。

这是相关页面：http://www.cakeandtravels.com/p/breakfast.html （我想张贴一张照片，但它不会让我。）

这是我到目前为止使用的CSS：

/* Recent posts by labels
--------------------------------- */ 
img.label_thumb{
float:left;
border: none; 
background: none;
height:120px;width:120  px;
margin:0 2px 2px 0px;
padding:0px;
}

ul.label_with_thumbs {
width:auto;
margin:0px 0px 0px 0px;
padding:2px;
border: none;
height: 800px;
}

img.label_thumb:hover{
border: none;
background: none; 
}

.label_with_thumbs{
float:left;
display: inline;
width:100%;
margin:0;
padding:5px;
background:none;
}

ul.label_with_thumbs li{
text-align: center;
text-wrap: auto;
text-indent: 5px;
line-height:140px;
margin:0;
padding: 4px 0 5px;
width:100%
}

然后链接到一系列Javascript并使用它导入到特定页面。（我真的希望问题不在于我的知识基础！）

任何帮助或者如果您需要任何进一步的信息来帮助我将非常感激。谢谢安琪

Answer 1

基本上，没有任何你的CSS，我只是把它：

ul.label_with_thumbs li {
display: inline-block;
width: 150px;
height: 110px;
text-align: center;
vertical-align: top; }

img.label_thumb {
margin: auto;
}

这解决了我对你的一些需求。这是my version，它可以保留一些改进以完全符合您的愿望（例如调整图像大小......），它只是一个测试版。

和Domi说的一样，你可以从你的控制台获得很多帮助。 F12显示它，您可以更改页面内的css以尝试改进它。

缩略图看不到我想要的方式？

1 个答案: