如何使UL不换行
日期：2014-05-17 浏览次数：20689 次
怎么使UL不换行
这个出来后，"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
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
