如何使UL不换行

怎么使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>

相关推荐