急急急急急急！

[kingkongzhang]

请教大牛门，谁能帮忙给写段css？实现ul的横排显示不换行，如果超出了父div的宽度就不显示。要兼容ie和火狐，跪求啊！！！！

[kingkongzhang]

[Quote=引用 5 楼 danica7773 的回复:]
HTML code

<style>
div{
width:400px;
height:50px;
border:1px solid gray;
overflow:hidden;
}

ul li{
display:inline-block;
_displ……
[/Quote]
我的意思是，ul横向排列，不换行，你这个换行了

[lovecatoon]

[Quote=引用 5 楼 danica7773 的回复:]
HTML code

<style>
div{
width:400px;
height:50px;
border:1px solid gray;
overflow:hidden;
}

ul li{
display:inline-block;
_displ……
[/Quote]

5楼写的真好,学习了~
要ul不换行,加上
ul{
display:inline;
margin:0px;
padding:0px;
}
就可以了吧

[hhwydwfg]

[Quote=引用 5 楼 danica7773 的回复:]

HTML code

<style>
div{
width:400px;
height:50px;
border:1px solid gray;
overflow:hidden;
}

ul li{
display:inline-block;
_display:inline;……
[/Quote]


Home Blog Picture Help Home Blog Picture Help Home Blog Picture Help Home Blog Picture Help Home Blog Picture Help Home Blog Picture Help

[kingkongzhang]

[Quote=引用 10 楼 hhwydwfg 的回复:]
引用 5 楼 danica7773 的回复:

HTML code

<style>
div{
width:400px;
height:50px;
border:1px solid gray;
overflow:hidden;
}

ul li{
display:inline-block;
_display:inline;……



Home Blog Pict……
[/Quote]对，换行了

[ddcatlee]

http://www.ddcat.net/blog/?p=1077

[taolin0001]

这么多答案呀，看看，学习了！！

[打字员]

LS兄弟的链接我看了一下，个人不是很喜欢用太多的CSS hack，少数一点还是可以的。

所以下面这个变通的方法不知道能不能满足要求？

<style>
	*{padding:0;margin:0;}
	body{
		text-align:center;
	}
    .nav{
        width:800px;
        height:50px;
        border:1px solid gray;
        /*overflow:hidden;*/
		text-align:left;
    }
	.nav div{
		width:20000px;
	}
	.nav div ul{
		list-style:none;
	}
    .nav div ul li{
		float:left;
		line-height:25px;
    }
</style>
<div class="nav">
	<div>
    <ul>
        <li>Home1</li>
        <li>Blog2</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>                
    </ul>
    <ul>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>                
    </ul>
	</div>    
</div>

[打字员]

其实就LZ的需求来说，将li的line-height设置为与容器等高，就页面效果而言己经算是达到要求了，

因为你不可能设置一个50px的容器，而让line-height只有25px，下面都是空白。

就算是这样，再给li们套一个height为25px的容器有何不可，虽说尽可能的不要用冗余标签,但只要用的合理，我觉得少数来点还是可以的。总比一大堆的CSS hack来的好。

而且如果可以的话，套li们的DIV总有个父容器吧，何不在它上面作作文章，而把套li们的DIV的height设置成25px呢。

[kingkongzhang]

各位大牛，解决了还给加分啊！！！

[wwwarewow]

<style>
	div{
		width:400px;
		height:50px;
		border:1px solid gray;
		overflow:hidden;
	}
	li{
		display:inline;
		padding-top:10px;
		height:50px;
		width:100px;
	}
</style>
<div>
	<ul>
		<li>Home</li>
		<li>Blog</li>
		<li>Picture</li>
		<li>Help</li>
	</ul>
</div>

[kingkongzhang]

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

HTML code
<style>
div{
width:400px;
height:50px;
border:1px solid gray;
overflow:hidden;
}
li{
display:inline;
padding-top:10px;
h……
[/Quote]
首先谢谢您，不过您这段代码FF下不行啊

[kingkongzhang]

顶上来！！

[打字员]

<style>
    div{
        width:400px;
        height:50px;
        border:1px solid gray;
        overflow:hidden;
    }

    ul li{
		display:inline-block;
        _display:inline;
		_zoom:1;
        padding-top:10px;
        height:50px;
    }
</style>
<div>
    <ul>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>				
    </ul>
    <ul>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>
        <li>Home</li>
        <li>Blog</li>
        <li>Picture</li>
        <li>Help</li>				
    </ul>	
</div>

[wwwarewow]

手头上没FF环境，并且对没研究过FF。不过 从danica7773 的代码受益匪浅。

[sunnj87]

display:inline-block;
_display:inline;
_zoom:1;

向5楼学习