div中ulli超出宽度隐藏且li不换行_html/css_WEB-ITnose

<style>        ul        {            list-style-type: none;        }        li        {            float: left;            display: inline-block;            display: -moz-inline-stack;            display: inline;        }    </style><div style="width: 500px; margin: auto; border: 1px solid red; overflow: hidden;        line-height: 30px; height: 30px;">        <span style="float: left"><</span>        <ul>            <li>1111111111111111111</li>            <li>22222222222222</li>            <li>33333333333333333333</li>            <li>444444444</li>        </ul>        <span style="float: right">></span>    </div>

回复讨论(解决方案)

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>无标题文档</title>    <style>
ul{margin:0;padding:0;}
li{list-style:none;}
.box{width: 500px; margin: auto; border: 1px solid red; overflow: hidden;line-height: 30px; height: 30px; position:relative;}
.box ul li{float:left;display:inline; vertical-align:top;height:30px;line-height:30px;padding:0 5px;}
.box ul {position: absolute;}
.box span{float:left;height:100%;line-height:30px;font-size:16px;background:#ccc;width:30px;text-align:center;}
.menu{float:left; width:440px;overflow:hidden; height:30px; position:relative;}
</style>