怎么使UL不换行

梵 2012-08-20 02:06:00



<body>

正文文本

<ul>

<li>

<a>UL列表</a>

<div id="div_4"> 

<a href='javascript:'>新建</a>

</div>

</li>

</ul>

</body>

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

...全文

1326 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

wwweeeeynet 2012-08-24

打赏
举报

xiaomeimei_2011 2012-08-21

打赏
举报

很笼统的给你修改了一下样式，因为只知道你需要ui不换行显示，回头最好你上传个图，这样就能很清楚的帮助你怎么解决你遇到的问题了~
下面的代码你运行试试看~~~



<!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>

梵 2012-08-21

打赏
举报

[Quote=引用 6 楼的回复:]

试试这个：
display:inline;(部分浏览器不支持)

没看清楚你的具体意思，不然选别的把，总觉得让ul不换行有点怪怪的。
[/Quote]

不让ul换行和li没关系好吧，没说不让li换行，再说了我这没用li...
不明白我的意思的麻烦建个html，将以下代码贴上：



<html>

<head></head>

<body>

<style>td{border:1px solid blue;}</style>

table：

<table style="border:1px solid black;">

<tr><td>这是第一行</td></tr>

<tr><td>这是第二行<ul>这里是ul</ul></td></tr>

</table>

</body>

</html>

而我要的效果是：



<html>

<head></head>

<body>

<style>td{border:1px solid blue;}</style>

table：

<table style="border:1px solid black;">

<tr><td>这是第一行</td></tr>

<tr><td>这是第二行 这里是ul</td></tr>

</table>

</body>

</html>

要用css实现这个效果，而不是像我的例子一样直接去除ul。

JPF1024 2012-08-20

打赏
举报

试试这个：
display:inline;(部分浏览器不支持)

没看清楚你的具体意思，不然选别的把，总觉得让ul不换行有点怪怪的。

xj19840107 2012-08-20

打赏
举报

学习下，有html5的东西可以学习吗

梵 2012-08-20

打赏
举报

[Quote=引用 1 楼的回复:]

也没看见特殊性，直接写在后面就行了。
[/Quote]

直接写在后面就换行了，ul是会自动给你换行的。

梵 2012-08-20

打赏
举报

[Quote=引用 2 楼的回复:]

你干嘛非要让div出现在li标签里，本身div就是一个换行式的标签，如果你想让li标签实现水平的话，
ul{list-style-type:none;}
ul li{width:100px; height:30px; float:left;}
这样应该可以了
[/Quote]



<style type="text/css">

        .set_bor ul

        {

            width: 10px;

        }

        .set_bor ul li

        {

            margin: 0;

            padding: 0;

            list-style: none;

            float: left;

        }

        .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>