打印

求教：使用display:inline后li无法自定义宽度，有没有办法解决？

azha [楼主]

绿尚网

初级会员

帖子: 41
体力: 65
威望: 0
当前: 广东广州
离线: 394 天

1^# 大中小发表于 2006-5-29 18:58

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

提示：您可以先修改部分代码再运行

绿尚www.readsun.com

TOP

西部数码港台主机新上线即买即用 | 211工程高起专、高起本、专升本

azha [楼主]

绿尚网

初级会员

帖子: 41
体力: 65
威望: 0
当前: 广东广州
离线: 394 天

2^# 大中小发表于 2006-5-29 19:01

这是文档的头部，如果把文档的头部去掉就可以正常显示了，好奇怪
但是一般文档头部是不能去掉的
这个头部是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>

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

提示：您可以先修改部分代码再运行

绿尚www.readsun.com

TOP

PSD网页模板下载,高端实用 | 微软 visual studio 2010 专题

yibote

中级会员

帖子: 439
体力: 420
威望: 0
离线: 4 天

3^# 大中小发表于 2006-5-29 19:41

参考文章:http://bbs.blueidea.com/viewthread.php?tid=2591283

但愿我不再浮躁,每天进步一点点-------- [易博特]精彩世界YIBOTE.COM

http://y

TOP

刘宾设计咨询机构/案例集1.3下载(268p) | 用画笔实现你的“原画设计师”梦想！

azha [楼主]

绿尚网

初级会员

帖子: 41
体力: 65
威望: 0
当前: 广东广州
离线: 394 天

4^# 大中小发表于 2006-5-29 22:39

多谢yibote，已经看了你提供的链接的文章，但是还不能解决我的问题
该文章中是将span设置为dispaly:block，所以可以设置宽度；同样的，将li设置为dispaly:block也可以设置宽度

但是我的问题是我已经将li设置为dispaly:inline了，不能再同时设置为block，但是我又需要将li显示在同一行而不换行
将li设置为block后再加float后也可以使li在同一行，但我是在js里面的调用的，用float会产生不同的效果

绿尚www.readsun.com

TOP

小毅

悟禅布衣

荣誉管理团队

认证
帖子: 1135
体力: 1664
威望: 218
当前: 广东广州
离线: 13 天

专长 网站运营,项目管理,市场

5^# 大中小发表于 2006-5-30 02:32

提示：您可以先修改部分代码再运行

关于display:inline;与float:left;相关的解释请参考：
http://www.andymao.com/andy/post/42.html

毅博客 玉振之

TOP

misshjn

快乐笛子

中级会员

帖子: 219
体力: 408
威望: 4
离线: 17 天

专长 前端制作,JS

6^# 大中小发表于 2006-5-30 15:57

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

------ 我的博客 ------
http://www.happyshow.org

TOP

zxfly

银牌会员

帖子: 873
体力: 1032
威望: 0
当前: 福建厦门
离线: 87 天

专长 网页设计,UI

7^# 大中小发表于 2006-5-30 16:53

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

提示：您可以先修改部分代码再运行

TOP

小毅

悟禅布衣

荣誉管理团队

认证
帖子: 1135
体力: 1664
威望: 218
当前: 广东广州
离线: 13 天

专长 网站运营,项目管理,市场

8^# 大中小发表于 2006-5-30 21:50

misshjn在上个帖子中说

引用:

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

默认的LI是块级元素。可以定义宽高。特此更正

毅博客 玉振之

TOP

azha [楼主]

绿尚网

初级会员

帖子: 41
体力: 65
威望: 0
当前: 广东广州
离线: 394 天

9^# 大中小发表于 2006-5-30 22:19

多谢各位高手了

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

看来只能采用小毅的方法，使用float了

绿尚www.readsun.com

TOP

misshjn

快乐笛子

中级会员

帖子: 219
体力: 408
威望: 4
离线: 17 天

专长 前端制作,JS

10^# 大中小发表于 2006-5-31 14:34

我记错了，谢谢版主的更正。

------ 我的博客 ------
http://www.happyshow.org

TOP

sdacnyian

新手上路

帖子: 18
体力: 17
威望: 0
离线: 888 天

11^# 大中小发表于 2006-6-19 21:11

<!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: ??&#236;?; 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="#">&#183;组织架构</A></LI>
<LI id=seven><A title=合作洽谈 href="#">&#183;相关证书</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="#">&#183;互联网与增值业务</A></LI>
<LI id=two><A title="" href="#">&#183;企业服务</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="#">&#183;企业文化</A></LI>
<LI id=two><A title="" href="#">&#183;网站地图</A></LI></UL></div></DD>
</DL></div></div></div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

sdacnyian

新手上路

帖子: 18
体力: 17
威望: 0
离线: 888 天

12^# 大中小发表于 2006-6-20 16:48

如果把文档的头部去掉显示成另外的样式,我需要这种样子,但不知道怎么做!请指点下,谢谢!

TOP

hdpei0227

新手上路

帖子: 12
体力: 8
威望: 0
离线: 1236 天

13^# 大中小发表于 2006-6-21 01:18

把文档的document type 去掉还是一样（linux&firefox）

TOP

oaix

中级会员

帖子: 114
体力: 250
威望: 0
离线: 40 天

14^# 大中小发表于 2006-6-21 07:40

可以用li{float:left;width:200px}来处理。

TOP

sdacnyian

新手上路

帖子: 18
体力: 17
威望: 0
离线: 888 天

15^# 大中小发表于 2006-6-22 13:10

可以用li{float:left;width:200px}来处理。这样不行

TOP

perfmlin

初级会员

认证
帖子: 52
体力: 50
威望: 0
当前: 四川成都
离线: 148 天

16^# 大中小发表于 2006-6-22 17:41

ul{
LIST-STYLE-TYPE: none;
display:inline;
margin:0px;
}
ul li{
FLOAT: left;
DISPLAY: block;
PADDING:0px;
}

试试这个

fuck gm

TOP

sdacnyian

新手上路

帖子: 18
体力: 17
威望: 0
离线: 888 天

17^# 大中小发表于 2006-6-24 11:45

谢谢！还是不行，

TOP