读书人

如何使UL不换行

发布时间: 2012-09-06 10:37:01 作者: rapoo

怎么使UL不换行

HTML code
<body>正文文本<ul><li><a>UL列表</a><div id="div_4"> <a href='javascript:'>新建</a></div></li></ul></body>


这个出来后,"UL列表"会在"正文文本"的下面一行,怎么把"UL列表"紧贴到"正文文本"后面?


[解决办法]
你干嘛非要让div出现在li标签里,本身div就是一个换行式的标签,如果你想让li标签实现水平的话,
ul{list-style-type:none;}
ul li{width:100px; height:30px; float:left;}
这样应该可以了
[解决办法]
试试这个:
display:inline;(部分浏览器不支持)

没看清楚你的具体意思,不然选别的把,总觉得让ul不换行有点怪怪的。
[解决办法]
很笼统的给你修改了一下样式,因为只知道你需要ui不换行显示,回头最好你上传个图,这样就能很清楚的帮助你怎么解决你遇到的问题了~
下面的代码你运行试试看~~~
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>MAXX</title><style type="text/css">*{margin:0;padding:0;}.set_bor ul{    list-style-type:none;    float: left;.set_bor ul li{    margin: 0;    padding: 0;    list-style: none;}.set_bor li a{    display: block;    margin: 0 1px 0 0;    padding: 4px 10px;    width: 60px;    height: 20px;    color: #FFF;    text-align: center;    text-decoration: none;}.set_bor ul li a:hover{    cursor: pointer;}.set_bor ul div{    position: absolute;    visibility: hidden;    margin: 0;    padding: 0;    background: #EAEBD8;}.set_bor ul div a{    position: relative;    display: block;    margin: 0;    width: auto;    white-space: nowrap;    text-align: left;    text-decoration: none;    background: #C5E1F4;    color: #2D2D2D;}.set_bor ul div a:hover{    background: #49A3FF;    color: #FFF;}</style></head><body><div style="float:left;">正文文本</div><div class="set_bor"><ul><li><a>UL列表</a><div id="div_4" style="display:inline;"> <a href='javascript:'>新建</a></div></li></ul></div></body></html>
[解决办法]
<body>
<div style="float:left;">
正文文本
</div>
<ul>
<li>
<a>UL列表</a>
<div id="div_4">
<a href='javascript:'>新建</a>
</div>
</li>
</ul>
</body>

读书人网 >CSS

热点推荐