当前位置 :| 主页>CSS教程>

使用display:inline后li无法自定义宽度

来源：cssplay 作者：cssplay 时间：2008-03-18 点击：

如下面的代码，li使用了display:inline属性，可以自定义背景颜色，但自定义宽度却无效。但是我想给每个li都定义一个不同的宽度，应该怎样解决？

这是文档的头部，如果把文档的头部去掉就可以正常显示了，好奇怪
但是一般文档头部是不能去掉的
这个头部是dw生成的，我没修改过

<!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/html; charset=gb2312" />
<title>无标题文档</title>
</head>

看看下面的代码，去掉头部后就正常显示了

《span如何设置宽度》该文章中是将span设置为dispaly:block，所以可以设置宽度；同样的，将li设置为dispaly:block也可以设置宽度
但是我的问题是我已经将li设置为dispaly:inline了，不能再同时设置为block，但是我又需要将li显示在同一行而不换行
将li设置为block后再加float后也可以使li在同一行，但我是在js里面的调用的，用float会产生不同的效果

span不是块级的所以其宽度是依据内容的多少而定，你必需要设定span为BLOCK这样才可以设置宽度！

关于display:inline;与float:left;相关的解释请参考：
http://www.cssplay.org.cn/css-tutorial/20080318/272.html

默认的 li 不是块级元素，定义的宽高都不会生效。

默认li怎么不能定义宽度？
直接拿小毅的修改一下，你看看它能不能定义宽高！

li默认确实是块元素的，可以定义宽度，但这个前提是li的display不为inline的时候当li的display为inline时则不可以了，我的问题就是因为inline造成的，使用inline使li变成内联元素了看来只能采用CSSPLAY的方法，使用float了

<!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/html; charset=gb2312"> <title>无标题文档</title> <style type="text/css"> #mainallbox { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; FONT-FAMILY: ??ì?; HEIGHT: 100%; TEXT-ALIGN: left; } #leftallbox { BORDER-RIGHT: #d5d5d5 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/Skin/200508/left_bgall.gif) #eee repeat-y left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 190px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-ALIGN: left; } #aboutbox1 { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; WIDTH: 190px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; TEXT-ALIGN: left; } #aboutbox1 DL { BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; LINE-HEIGHT: normal; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; } #aboutbox1 DT { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 35px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #c0c0c0 5px solid; WIDTH: 195px; PADDING-TOP: 0px; BORDER-BOTTOM: #c0c0c0 1px solid; TEXT-ALIGN: left; } #aboutbox1 DD { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 25px; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #e0e0e0 5px solid; WIDTH: 190px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; } #tabs { CLEAR: both; BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND: #eee; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; HEIGHT: 0px; TEXT-ALIGN: left } #tabs UL { list-style:none; margin:0px; } #tabs LI { width:180px;background:#CCC;margin:15px 0px 15px 0px;line-height:30px; } #tabs LI A { display:block;text-align:center;height:30px;} #tabs LI A:link { background: #5999E4 no-repeat 0 50%;text-decoration:none;font-size: 12pt; color: #ffffff; } #tabs LI A:visited { background:#5999E4 no-repeat 0 50%;text-decoration:underline;font-size: 12pt; color: #ffffff; } #tabs LI A:hover { font-weight:bold;text-decoration:none;background:#609765 no-repeat 0 50%;font-size: 12pt; color: #ff0 } #tabs LI A:active { COLOR: #ffcc00 } .PE_title1 { FONT-WEIGHT: bolder; FONT-SIZE: 13px; BACKGROUND: #e0e0e0 no-repeat 15px center } .PE_title2 { FONT-WEIGHT: bolder; FONT-SIZE: 13px; BACKGROUND: #e0e0e0 no-repeat 15px 7px } </style> </head> <body> <div id=mainallbox> <div id=leftallbox> <script language="JavaScript" type="text/javascript"> var tID=0; function ShowTabs(ID){ var titles=document.getElementsByName("tabtitle"); titles[tID].className='PE_title1'; titles[ID].className='PE_title2'; var Tabss=document.getElementsByName("Tabs"); Tabss[tID].style.display='none'; Tabss[ID].style.display=''; tID=ID; } </script> <div id=aboutbox1> <DL> <DT class=PE_title1 id=tabtitle onclick=ShowTabs(0)>东芝复印机</DT> <DD> <div id=Tabs style="DISPLAY: none"> <UL> <LI id=four><A title=公司组织架构 href="#" _fcksavedurl="#">·组织架构</A></LI> <LI id=seven><A title=合作洽谈 href="#" _fcksavedurl="#">·相关证书</A></LI></UL></div></DD> <DT class=PE_title1 id=tabtitle onclick=ShowTabs(1)>理光复印机</DT> <DD> <div id=Tabs style="DISPLAY: none"> <UL> <LI id=one><A title="" href="#" _fcksavedurl="#">·互联网与增值业务</A></LI> <LI id=two><A title="" href="#" _fcksavedurl="#">·企业服务</A></LI></UL></div></DD> <DT class=PE_title1 id=tabtitle onclick=ShowTabs(2)>佳能复印机</DT> <DD> <div id=Tabs style="DISPLAY: none"> <UL> <LI id=one><A title="" href="#" _fcksavedurl="#">·企业文化</A></LI> <LI id=two><A title="" href="#" _fcksavedurl="#">·网站地图</A></LI></UL></div></DD> </DL></div></div></div> </body> </html>
提示：您可以先修改部分代码再运行

Tag：自定义宽度

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：span如何设置宽度
下一篇：在IE中使用first-child

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表

热点实例