|
最近有很多网友都在问一个问题：怎么能让多个不固定宽度的对象显示在一行上，如果有对象在剩余空间中显示不下，则换到下一行显示，而不是一个对象分两行显示。
的确，这是令初学者经常困惑的问题，也是经常在设计中用到设置。类似网站模板右侧的标签列表的应用。
下面请看这样一个例子：
<!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">
.all {
float:left;
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
overflow:hidden;
}
.all a {
height:20px;
line-height:20px;
margin:0 14px 0 0;
color:#000;
}
.all a:hover {
color:#F00;
}
</style>
</head>
<body>
<div class="all">
<a href="#">足球</a><a href="#">台球</a><a href="#">篮球</a><a href="#">排球</a><a href="#">羽毛球</a><a href="#">乒乓球</a>
<a href="#">网球</a><a href="#">橄榄球</a><a href="#">冰球</a><a href="#">保龄球</a><a href="#">basketball</a><a href="#">football</a>
</div>
</body>
</html>
在IE6下运行后可以看到，第一行最后一个标签“乒乓球”就是换行显示。那么在Firefox下则不会出现这样的问题，如图：
也许这才是您想要的效果，那么，在IE下能否实现呢？答案是肯定的，只要您记住一下的几个步骤：
（1）如果对象是内联对象，则将其强制转换为块级对象。display:block。本例中用到的是链接标签a，是内联对象，所以，a标签要设置display:block。
（2）要设置对象的浮动属性。float:left。因为块级对象默认将占据整行的，这样做即可以使块级化了的内联对象显示在一行中，又可以使对象自适应内容。注意：如果对象同时有设置了左、右外边距，在IE6下很可能会出现双倍边距的Bug。此时，可以将display:block替换成display:inline来解决此问题。
（3）强制内容显示在一行上。word-break:keep-all。这是IE专有的属性，参见word-break。
（4）建议设置对象的高度。height。
向CSS的“a {...}”中加入：“display:block; float:left; word-break:keep-all;”，本例中的问题就可以解决。但有一种情况例外，就是：如果文字中包含“-”或空格等字符的时候，如下例：
<!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">
.all {
float:left;
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
overflow:hidden;
}
.all a {
height:20px;
line-height:20px;
margin:0 14px 0 0;
color:#000;
display:block;
float:left;
word-break:keep-all;
}
.all a:hover {
color:#F00;
}
</style>
</head>
<body>
<div class="all">
<a href="#">足球</a><a href="#">台球</a><a href="#">篮球</a><a href="#">排球</a><a href="#">羽毛球</a><a href="#">乒-乓球</a>
<a href="#">网球</a><a href="#">橄榄球</a><a href="#">冰球</a><a href="#">保龄球</a><a href="#">basket ball</a><a href="#">football</a>
</div>
</body>
</html>
将原“乒乓球”改为“乒-乓球”，将原“basketball”改为“basket ball”后，在IE6下还是会出现两行显示一个对象的情况。解决办法就是设置对象的处理空格方式的属性“white-space:nowrap”。
（5）强制文本在遇到空格或“-”等字符时不换行。white-space:nowrap。参见white-space。
（6）设置父对象的
overflow:hidden属性将超出的部分隐藏。当对象中文本超过了父对象的宽度，且没有隐藏超出的部分时，在IE6下会将父对象撑开，影响布局。
下面是完整的实例：
<!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">
.all {
float:left;
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
overflow:hidden;
}
.all a {
height:20px;
line-height:20px;
margin:0 14px 0 0;
color:#000;
display:block;
float:left;
word-break:keep-all;
white-space:nowrap;
}
.all a:hover {
color:#F00;
}
</style>
</head>
<body>
<div class="all">
<a href="#">足球</a><a href="#">台球</a><a href="#">篮球</a><a href="#">排球</a><a href="#">羽毛球</a><a href="#">乒-乓球</a>
<a href="#">网球</a><a href="#">橄榄球</a><a href="#">冰球</a><a href="#">保龄球</a><a href="#">basket ball</a><a href="#">football</a>
</div>
</body>
</html>
这是解决此类问题的根本，希望本文会对大家有所帮助。
|
