HTML中的内联水平间隔符

时间:2010-06-03 16:54:12

标签: html

我使用http://zine.pocoo.org/上使用的相同技术制作带幻灯片的网页。我正在制作网站的人希望幻灯片显示居中。但是,有些照片是纵向布局,有些是风景照。 (这不是我的选择。)我需要一个position: absolute来获取包含正确位置的项目的li,因此将它们居中并不起作用。 (至少,不是通过常规方法。)

所以,我认为在肖像照片上的图像之前插入一个124像素的“间隔物”可能会有效。我用<span style="width: 124px;">&nbsp;</span>尝试了它,但它只插入一个空格,而不是整个124像素。尽管如此,幻灯片放入和放出都很好,所以我认为如果我能得到合适的间距它会起作用。

我的问题是这样的:有没有人知道在HTML中使用124px空间内嵌(最好不使用图片),或者在li项目中将图片居中的另一种方法?

3 个答案:

答案 0 :(得分:2)

我认为您需要添加margin-left而不是padding-left,因为边距位于元素之外,填充位于内部。

答案 1 :(得分:1)

尽量避免在元素上放置大的垫片,特别是在多个元素上。在元素上添加间隔符的唯一方法是相对定位或内联块元素(小心使用。)

幻灯片放映的最佳选择是让亲戚定位<ul>。由于<ul>是相对定位的,因此您可以在<li>内将position:absolute;设置为<ul>。此时,您可以将<li>设置为width:100%;text-align:center;,以便内部的任何内容都位于水平中心(CSS2中的垂直居中很棘手。)查看{{3}它默认输出内联样式但仍然非常好。

答案 2 :(得分:1)

这已经过时了,但我想它仍然值得回答。你的跨度没有扩展的原因是因为它仍然是一个内联元素。 set display:inline-block让它更像一个块元素