主题:  在次请问~用外部样式表定义二个并排排列的图片之间的距离~~

lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#12005/8/17 11:11:22
请问一下,怎样用外部样式表定义二个图片之间的距离~~
例如,我想控制页面内二个图片居中,并且二个并排的图片之间的间距为20PX。(当然并不一定是二个图片,有可能是三个图片并排,每个间距离固定20px.



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
#22005/8/17 12:14:39
把 img 放到 div 里面。。。

然后设定 div 的 margin 呗?



whirlwind

职务:普通成员
等级:1
金币:0.0
发贴:94
#32005/8/17 12:47:19

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#42005/8/17 14:34:54
谢谢你啊。
不过能不能不在DIV旁边加上CENTER,直接写在外部样式里?让它居中呢?
我试过表格的,可以居中。
table{
    margin:20px 0px 0px 15%;
    position:relative;
}


可是我把你的代码改了一下:
---------------------
div.dis1{
display:inline;
    margin-left:15%;
    vertical-align:middle;
    }
div.dis2{
display:inline;
    vertical-align:middle;
    margin-left:16%;
    }
-------------------------------------
怎么放在外部里面不好用呢?------>主要是不居中的问题



lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#52005/8/17 14:35:51
对了,补充一下。谢谢你。代码是好用的。只是我在你的基础上,加个居中,却不好用了,我错在哪里了?



whirlwind

职务:普通成员
等级:1
金币:0.0
发贴:94
#62005/8/17 21:26:50
可以这样做

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

ps:你那样做,我不知道你的全部代码是什么,不好判断你做出来的效果.



lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#72005/8/18 9:37:10
其实我做出来的,如果不让它居中的话,和你的效果一样。(也就是右边的图片离左边的图片是20PX的距离)
可是现在我所出现的问题的,你的居中,是在DIV的代码里面加上去的,也就是说<div align=center></div>
可是,我不能在这里面加CENTER,我只能在外部的样式表里面,在DIV的标签 里设置它。
我的外部样式表代码:(其中的一部分)
--------------
/*布局属性*/
div.dis1{
display:inline;
    margin-left:15%;
    vertical-align:middle;
    align:center;
    }
div.dis2{
display:inline;
    vertical-align:middle;
    margin-left:16%;
    align:center;
    }

----------------------------
下面是网页里面的部分代码:
<div class="dis1"><img src="aa.gif" width="45" height="20" border="0"></a>
</div>
<div class="dis2"><img src="bb.gif" width="45" height="20" border="0"></a>
</div>
---------------------------
现在出现的问题是,二个图片虽然有了间隔的距离,可是并不居中。二个图片都在屏幕的前面一半的位置上。而不是像你那样的居中在屏幕中间。



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
#82005/8/18 10:10:23
这样?


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#92005/8/19 13:44:43
谢谢你啊,我怎么没想到在外面套一个DIV呢~厉害哟。。还有个问题想请教一下:

--
input.rim{
    color:#016176;
    width:150px;
}
我定义表格的INPUT长度为150PX,为什么表单的宽度还是原来的样子?
还有一个:
select{
border:1px solid #14949f;
    width:100px;
}

SELECT的边框为什么样式没有作用呢?而宽度却起到了作用。

二个问题是:上面的宽度没有起作用。下面的呢,边框没有起作用。~~
~~



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
#102005/8/19 13:48:58
SELECT 不能设定边框的。。

150px。。代码没问题啊。。。

你改改这个数就能看到变化了。。。



lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#112005/8/19 14:57:53
请问一下,为什么定义textarea边框就可以呢?为什么SELECT不行~~
我想让表单的样式统一一下,不知道SELECT的边框能不能改呢?



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
#122005/8/19 15:48:00
lilish在上个帖子中说
引用:
请问一下,为什么定义textarea边框就可以呢?为什么SELECT不行~~
我想让表单的样式统一一下,不知道SELECT的边框能不能改呢?


SELECT 的边框不能用 CSS 改的。。。

如果要平面的 SELECT 效果可以用层模拟。。。



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
#132005/8/19 16:18:00
如果单纯的用 CSS 。。。 能达到的最好效果也就是下面这样了。。。


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#142005/8/22 13:41:19
这样也很不错了~~真的很谢谢你。
不知道 clip:rect(0px,18px,22px,0px);

overflow:hidden;
在句子里是什么作用?



lilish

职务:普通成员
等级:2
金币:0.0
发贴:408
#152005/8/22 13:44:05
我想请问你一下:
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切


把clip:rect(0px,18px,22px,0px);把这句去掉后,效果没什么变化啊。
只是把overflow:hidden;去掉,效果才有反映。
可不可以不加RECT呢???