这段HTML中的css代码怎么让li标签里的图片浮动成横排？_词汇网
这段HTML中的css代码怎么让li标签里的图片浮动成横排？
责任编辑：词汇网 发表时间： 13:49:18
上面的代码有浮动 所以我在代码里加了清除浮动的影响，并向左浮动，但是效果是竖排，求解！…显示全部【以下解答】去掉clear就可以吧【以下解答】是不是父容器被限制了宽度啊【以下解答】
上一集:没有了 下一集:
相关文章：&&&&&&&&&&&&&&&&&&&&
最新添加资讯
24小时热门资讯
附近好友搜索ul li 横向排列不换行的做法
核心提示：有些时候需要使用ul li 水平排列而不要换行，做法很简单，ul li 横向排列不换行的做法，直接拷我的代码上来，注意红色部分就可以了：#canvaslist{
list-style:
padding:0;
有些时候需要使用ul li 水平排列而不要换行，做法很简单，直接拷我的代码上来，注意红色部分就可以了：
#canvaslist{
list-style:
padding:0;
white-space:
width: 100%;
#canvaslist li{
line-height:20
margin:5px 4
text-align:
关键部分只有红色部分。
另外一个地方，在li部分，我刚开始加入了float : left ，之后就没有不换行的效果，去掉就可以了。不知道原因。&
赞助商链接Li的横向排列自适应宽度问题_CSS教程_前端技术
您的位置： &
& 详细内容
问题|自适应
　　众所周知，FF和OPERA即其它遵循CSS2标准的浏览器由于版本的不断改进，早就支持:　　display:table　　dispaly:table-cell　　dispaly:table-row　　dispaly:table-row- group　　dispaly:table-column　　dispaly:table-column-group　　等属性。　　(至少是 FF1.0,OPERA7就能支持了，之前的就不太清楚了)那还犹豫什么?开始动手吧(为了演示加了一些 padding和border):&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&Normal&/title&&style type="text/css"&&!--*{ margin:0 padding:0}#d{ display: margin:0 background:#0 padding:10 width:80%; border:1px solid #f00;}#d ul{ display:table-row-}#d li{ display:table- list-style: border:1px solid #333; background: text-align:}--&&/style&&/head&&body&&div id="d"&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&/ul&&/div&&/body&&/html& 运行代码复制代码另存代码收藏本页&IE不支持该效果，FF和OPERA下看看。上面的示例分别定义了#d{ &&&&&&&display: }& #d&ul{ &&&&&&&display:table-row- } #d&li{ &&&&&&&display:table- }那么它们在CSS2的样式里表现就分别相当于表格的&tabel& &tr& &td&标签，这样上面第一个示例里的5个 &li&就自然的被均分横向排列在#b和#b ul里，一切都很正常，表格都是这么解释的。然而，细心的朋友又会想到另一个问题，当#d的宽度不能被所包含的#d li的节点数整除，#d li的宽度又是如何均分#d的宽度呢？它在浏览器下宽度尺寸又是如何表现的呢？为了说明问题，重新定义一个不被#d li的节点数整除的#d的宽度，这里任意给个799px，在FF/opera下测试看看:&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&Normal&/title&&style type="text/css"&&!--*{ margin:0 padding:0}#d{ display: margin:0 background:#0 padding:10 width:799 border:1px solid #f00;}#d ul{ display:table-row-}#d li{ display:table- list-style: border:1px solid #333; background: text-align:}--&&/style&&/head&&body&&div id="d"&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&/ul&&/div&&script type="text/javascript"&var d=document.getElementById("d");var c=d.getElementsByTagName("li");var l=c.for(var i=0;i&l;i++)alert(c[i].offsetWidth)&/script&&/body&&/html& 运行代码复制代码另存代码收藏本页这个在IE下就不用测试了，我也没加非IE的判定，偷了个懒。既然FF和OPERA都基于上述原理来解释这种类似表格的样式，IE又不支持，何不为其设定一个相同的解释机制呢？我们先来看看IE下我们所能做作的：&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&Normal&/title&&style type="text/css"&&!--*{ margin:0 padding:0}body{ text-align:}#d{ display: margin:0 background:#0 padding:10 width:799 border:1px solid #f00;}#d ul{ display:table-row-}#d li{ display:table- list-style: _float: width:158 border:1px solid #333; background: text-align:}--&&/style&&/head&&body&&div id="d"&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li style="width:157px"&aaa&/li&
&/ul&&/div&&/body&&/html& 运行代码复制代码另存代码收藏本页这里定义了#d li向左浮动，也分别定义了它们的宽度（注：这里因为设定了其border为1px，宽度就是158px了）。为了防止FF/OPERA识别浮动，用了_float:& OK――这回可以在IE下测试了――相当完美！当然FF/OPERA下当然也一样到此，如果你认为问题解决了，并且你平时也是这么做的――那么你现在可以关闭这个话题了，该忙什么就忙什么吧！然而，问题是当我们的设定#d的宽度为798px呢？――那再给倒数第二个#d li加个样式来设定宽度width:157px不就得了？那如果再重新设定#d的宽度为797px、796px……呢？（也许你设计完成一个页面后再也不会动这些宽度尺寸了）但再麻烦点的是如果#d li的节点数需要调整了――表现为我们在日常的网站开发和维护中往往会增加或减少这种导航列表栏目，是否还要重新计算和分别设定这些#d li的宽度呢？这不算很麻烦，我的数学还不至于那么差劲――也许你会说。但真正麻烦的是：当我们在做一个按百分比来进行页面及横向导航的设计时，这些#d li的宽度又该如何设定呢？还是实例为王，下面只是对上面的示例做个小小的改动，还好是5个#d li节点，正好每个宽度是20％：&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&Normal&/title&&style type="text/css"&&!--*{ margin:0 padding:0}body{ text-align:}#d{ display: margin:0 background:#0 padding:10 width:80%; border:1px solid #f00;}#d ul{ display:table-row-}#d li{ display:table- list-style: _float: width:20%; border:1px solid #333; background: text-align:}--&&/style&&/head&&body&&div id="d"&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&li&aaa&/li&
&/ul&&/div&&/body&&/html& 运行代码复制代码另存代码收藏本页测试好像也很不错，似乎没什么不如意的地方（可能在有些机器上会折行）。再调整一下分辨率看看 ――还是挺好的啊（可能在有些机器上会折行）！那么你在试试缩小IE窗口（不是最小化到任务栏），如果还是正常的话（相信有些朋友的导航效果已经开始出现折行了）――我会有办法让你沮丧的把你的放在缩小后的IE窗口的右边框上，横向逐渐逐渐拖动缩放IE的窗口――不用多说，很多朋友肯定早已明白这当中的原由，这里乱幌轮饕钦攵砸恍┎惶靼椎男氯耍先司秃雎哉舛伟杉虻ニ狄幌拢 上例中设定的#d的百分比宽度为80%，那么这个宽度自然会随着IE窗口大小的改变而改变，如果调整后的IE窗口为999，那么这时这个#d的实际宽度为 792，这个宽度自然不能被#d li的节点数整除，也就是20%宽度不为整数（浏览器显示的最小单位是1象素，不能再分了，可能是四舍五入），很自然就会出现#d li的宽度和大于#d的实际宽度而导致折行现象了。天哪！差点忘了，上面#d li定义了 border为1px，则#d li的宽度总和为100%+10px了，赶紧去掉再试试――这回好像可以了，再也没有出现上面的现象，IE好像没有对#d li的实际宽度进行四舍五入算法。难道这里就不能再额外设定#d li的 border和padding了吗？这还不算，最糟糕的是：如果#d li的节点数为3/7/9/11……等等根本不能均分#d宽度的值，你又得分别设定每个#d li的百分比，使它们的总和等于100%了。而且依旧不能再额外设定#d li的border和padding另外：在#d的宽度为固定尺寸下，设定的#d li为百分比时，有时也会出现一些你不想看见的问题，相信很多朋友也遇到过。不了解的可以自己试试。
( 01:33:22)
( 13:20:28)
( 12:22:42)
( 01:42:30)
( 15:52:32)
( 15:45:00)
( 15:44:58)
( 18:45:55)
相关排行总榜HTML中的&UL&标签中li横向排列
HTML中的&UL&标签中li横向排列
4984人阅读
第一步、编写横向菜单的HTML代码架构请将以下代码添加到HTML文档的导航栏区域中。&ul id="menu"&
&li&&a href=""&&/a&&/li&
&li&&a href="http://www.Code52.Net"&Code52.Net&/a&&/li&
&li&&a href=""&&/a&&/li&
&li&&a href="" class="last"&&/a&&/li&
&/ul& 第二步、编写CSS代码1、设置公共样式请将以下CSS代码添加到HTML文档的&head&...&/head&标签范围中。&style type="text/css"&
font:12px verdana, arial, sans- /* 设置文字大小和字体样式 */
#menu, #menu li {
list-style: /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
&/style&大家都知道，&ul&中的各条目&li&默认都是纵向排列的，我们需要定义CSS来让其横向排列起来。Tips：因为我们现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果您在 body 或其他地方已经重设了默认效果，以上代码可以去掉2、让文字横排大家都知道，&ul&标签下的项目&li&默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。&style type="text/css"&
#menu li {
float: /* 往左浮动 */
&/style&3、设置链接样式：&style type="text/css"&
#menu li a {
display: /* 将链接设为块级元素 */
padding:8px 50 /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:# /* 设置文字颜色 */
text-decoration: /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
&/style&我们用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果你的菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：&style type="text/css"&
#menu li a {
display: /* 将链接设为块级元素 */
width:150 /* 设置宽度 */
height:30 /* 设置高度 */
line-height:30 /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
text-align: /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:# /* 设置文字颜色 */
text-decoration: /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
&/style&4、链接悬停效果：通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，你可以在CSS悬停属性上定义背景图片。&style type="text/css"&
#menu li a:hover {
background:#146C9C; /* 变换背景色 */
color:# /* 变换文字颜色 */
&/style&这里的代码一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。&ul id="menu"&
&li&&a href=""&&/a&&/li&
&li&&a href="http://www.Code52.Net"&Code52.Net&/a&&/li&
&li&&a href=""&&/a&&/li&
&li&&a href="" class="last"&&/a&&/li&
&style type="text/css"&
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
&/style&好了，到这里一个简单的横向导航菜单就制作完成了，是不是很简单？ 下面给出完整代码：&style type="text/css"&
font:12px verdana, arial, sans-
#menu, #menu li {
list-style:
padding:0;
#menu li {
#menu li a {
/* 如果是中英文混排的文字，建议用固定宽度
line-height:30
text-align:
padding:8px 50
background:#3A4953;
text-decoration:
border-right:1px solid #000;
#menu li a:hover {
background:#146C9C;
text-decoration:
border-right:1px solid #000;
#menu li a.last {
border-right:0; /* 去掉左侧边框 */
&ul id="menu"&
&li&&a href=""&&/a&&/li&
&li&&a href="http://www.Code52.Net"&Code52.Net&/a&&/li&
&li&&a href=""&&/a&&/li&
&li&&a href="" class="last"&&/a&&/li&
&/ul&你可以查看我们制作的在线演示和下载本文提供的实例包。上面的CSS样式，我修改了一下。如下：&style type="text/css"&#menu {font-size: 12font-weight:}#menu li{list-style-image:list-style-type:background-color: #999999;border-right-width: 1border-right-style:border-right-color: #000000;float:}#menu li a{color: #FFFFFF;text-decoration:margin: 0padding-top: 8display: /* 作为一个块 */padding-right: 50 /* 设置块的属性 */padding-bottom: 8padding-left: 50}#menu li a:hover{background-color: #0099CC;}&/style&
发表评论：
TA的最新馆藏CSS的ul和li实现横向排列和去掉li的点
作者：佚名
字体：[ ] 来源：互联网 时间：10-23 17:39:28
怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需
今天做网页是老是不懂怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，做个笔记： 代码如下: #ul { float: } #ul li { float: list-style: } 顺便拓展一下li的list-style： 代码如下: ul { list-style:square inside url('.../.img'); } ul { list-style: } ol { list-style:upper- } ol { list-style:lower- } 再写个今天看到的东西，是关于dl,dt,dd的，其实就是类似于子类的，我比较少见到各个网页上用： 代码如下: &dl& &dt&Apple&/dt& &dd&苹果&/dd& &dt&Boy&/dt& &dd&男孩&/dd& &/dl& 效果如下：
大家感兴趣的内容
12345678910
最近更新的内容}