CSS教程:关于文字溢出问题的研究

2008-03-01 10:30:35 来源:蓝色理想 zoloadang

4.也加上浮动效果；

Webjx.Com

运行代码框
<!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 name="generator" content="WebJX editor, www.webjx.com" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:200px; } </style> </head> <body> <div class="main"> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">两猪两猪两猪</a> <a href="#" style="color:#f00" class="test">↑上面就是多出的猪两个</a> <a href="#" class="test">再谈猪的问题</a> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

5.想想如果将外面的main中的宽度设置去掉后，会发现最后个层并未连续浮动到第三个层后面，而是另起新行排列；

网页教学网

运行代码框
<!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 name="generator" content="WebJX editor, www.webjx.com" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } </style> </head> <body> <div > <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">两猪两猪两猪</a> <a href="#" style="color:#f00">↑上面就是多出的猪两个</a> <a href="#" class="test">再谈猪的问题</a> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 网页教学网

6.将main中的宽度设定到一定数值时也可以是正常的；

运行代码框
<!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 name="generator" content="WebJX editor, www.webjx.com" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Untitled</title> <style> *{ font-family:"宋体"; } .test{ display:block; float: left; margin-right:2px; } .main{width:500px; } </style> </head> <body> <div class="main"> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">再谈猪的问题</a> <a href="#" class="test">两猪两猪两猪</a> <a href="#" style="color:#f00">↑上面就是多出的猪两个</a> <a href="#" class="test">再谈猪的问题</a> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

复制链接发给好友网友评论收藏本文关闭此页

上一篇：微软的签名认证的相关问题

下一篇：Illustrator实例:MM人像