div+CSS中img ul li在同一行用什么语法

div+CSS中img ul li在同一行用什么语法,第1张

img是的标签
<ul><li></li></ul>是列表标签
<ul><li><img src="路径" /></li></ul>
要使他们在同一行,可以把设置成display:block;然后float即可!

CSS: ulitem li{
margin-left:4px;
margin-top:2px;
text-align:center;
height:50px;
line-height:50px;
float:left;
}

在html中如何让两个dl对齐显示:实际效果来测试一下:

1、打开相关测试软件,设置两个css样式这里取名:dl1   dl2,在html中用dl标签引用这两个样式如下


<style>
dll{ width:200px; height:100px; background-color:#F00; float:left;}
dl2{ width:200px; height:100px; background-color:#09F; float:left;}
</style>
<dl class="dll"></dl>
<dl class="dl2"></dl>

详解:两个dl引用的css样式宽度width都为200px,高度height为100px,为了区分两个区域块是否在同一行显示,这里设置两个背景颜色dl1为#F00(红色),dl2为#09F(浅蓝色);主要css属性:float:left;使其靠左浮动对齐,最后在html中用dl引用两个css样式;

注:float:left靠左浮动对齐;

float:right靠右浮动对齐;

下方如果还有区域块儿请记得清除一下浮动:clear:both;清除左右浮动,left清除左浮动,right清除右浮动;

2、网页中实现效果为:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/yw/13375334.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-24
下一篇 2023-07-24

发表评论

登录后才能评论

评论列表(0条)

保存