ydzf.net
当前位置:首页 >> html中怎么让li并排 >>

html中怎么让li并排

利用dreamweaver新建一个html页面1 在body里面输入代码 你好2 默认的样式是这样的3 float:left代表的是元素左对齐.这样li..

#content_category dl {padding:0px;margin:0px;} #content_category dl dd {} #content_category dl dt {} #content_category dl dd ul {padding:0px;margin:0px;list-style-position: outside;list-style-type: none;} #content_category dl dd ul li {float:left;width

给你html里面ul里面的li设置浮动,如下:ul li{ float:left;}

<ul> <li style="display:inline;"><b>*</b>li1</li> <li style="display:inline;"><b>*</b>li2</li> </ul> 那是肯定的撒,你手动给他加上标记撒.就像上面的

要头脑灵活啊 li是块级元素 要并列起码两种方法1.行内元素都在行上 把li变成行 ul li{display:inline;}这样缺点是dom取到li准确宽度属性 如offset scroll 还 你li后回车换行 li标签之间空白2.浮动块级元素会在行 ul li {float:left} 这样话li回车换行会被浮动所挤掉 算是比较完美方法

并排的话,你需要使用CSS的float属性,然后在设置浮动; 比如<div style="widht:500px"><div style="float:left;width:200px">左</div><div style="float:left;width:200px">右</div></div> 这样,这个两个DIV标签就在同一行上了(同时靠左),

很多回答都是设置float属性来排列,其实可以从属性之外的方面设置.鉴于li元素是块状元素,所以元素与元素之间才会换行,现在只要把li元素变成元素之间可以同行的内联块状元素就行了.具体代码如下:li{ display:inline-block;}

<ol style="list-style-type:none;"> <li style="float:left;"> 1</li> <li style="float:left;"> 2</li> </ol> OK.

不同的ul设置不同的CSS样式就可以了.<style>.a {自己根据需要写}.a li{自己根据需要写}.b{自己根据需要写}.b li{自己根据需要写}</style><div class="a"><ul><li>A文字文字</li></ul></div><div class="b"><ul><li>B文字文字</li></ul></div>

实现li元素横向显示的方法有两种 一.就是楼上那位说的方法,其中语法我不在多说.但是当在浮动的li的时候不要忘了对起父元素ul进行浮动,应为如果你在ul上添加了背景的话,就会出现问题了,随着li元素的浮动,其父元素就会收缩.这样会打乱布局.解决这样的方法亦有两种.1.父元素的的浮动.2.添加额外的无语意的标签如<div id="clear"></div> #clear { clear:both; } li前面的黑点是默认的,不能改变大小,只能改变样式.但是可以用背景图象实现.记住选择应用background:url() 的形式要比list-style-imag要好!原因就在于前者控制图象的能力要比后者强.

网站首页 | 网站地图
All rights reserved Powered by www.ydzf.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com