HTML中的内联水平间距
我使用http://zine.pocoo.org/上使用的相同技术制作了幻灯片的网页。 我正在制作网站的人希望以幻灯片为中心。 但是,一些照片是肖像布局,一些是风景。 (这不是我的选择。)我需要一个position: absolute
让包含正确位置的项目包含这些项目,所以将它们集中起来不起作用。 (至少,不是通过正常的方法。)
所以,我认为它可能会在肖像图片上的图像之前插入一个124像素的“间隔”。 我试着用<span style="width: 124px;"> </span>
,但它只插入一个空格,而不是全部124个像素。 虽然幻灯片显示淡入淡出,但我认为如果我能够获得适当的间距,它将起作用。
我的问题是这样的:有没有人知道有一种方法可以在HTML中内嵌 124px的空间(最好不使用图像),或者以其他方式将图片置于li
项目中?
我认为你需要添加margin-left
而不是padding-left
,因为margin在元素之外,并且填充在里面。
尽量避免在元素上放置大的间隔符,特别是在多个元素上。 在元素上添加间隔符的唯一方法是相对定位或内联块元素(仔细使用)。
幻灯片的最佳选择是相对定位<ul>
。 由于<ul>
是相对定位的,您可以将<li>
设置为position:absolute;
在<ul>
。 此时,您可以将<li>
s设置为width:100%;
和text-align:center;
所以里面的东西都放在水平中心(CSS2中的垂直居中很棘手)。检查http://jquery.malsup.com/cycle/默认输出内联样式,但仍然非常好。
这已经很老了,但我想这仍然值得回答。 你的跨度不扩展的原因是因为它仍然是内联元素。 设置display:inline-block来让它表现得更像块元素
链接地址: http://www.djcxy.com/p/46119.html上一篇: Inline horizontal spacer in HTML
下一篇: DQL Query fails