ul li 水平排列不断行和垂直居中有关问题，求解答，虚心求教
日期：2014-05-17 浏览次数：20871 次
ul li 水平排列不断行和垂直居中问题，求解答，虚心求教。
我现在在写一个导航栏，用ul水平平铺，但是现在遇到了一个问题，就是要使我用float:left，那么在浏览器里放大页面会发现导航栏会乱掉，要使用display: inline;和white-space: nowrap;可以实现水平平铺，而且在浏览器中放大页面不会乱，但问题来了，用display: inline;和white-space: nowrap;后，里面的文字无法垂直居中，我是将ul放在一个div里面了，div想要让ul文字和图片在div里面垂直居中，并且横向排列（IE9无法垂直居中，Chrome就可以），这让人很郁闷，而用float:left就可以垂直居中。
现在有没有什么办法，既可以让ul里面的东西水平平铺，垂直居中而且在浏览器里面方法后不乱的。
代码如下：
HTML：
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body style="margin: 0">
<!--总容器-->
<div class="container">
<!--导航栏开始-->
<div class="nav">
<ul>
<li class="logo"><a href="#">导航栏1</a></li>
<li class=""><a href="#">导航栏1</a></li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
<li class="menu_right"><a href="#"></a>导航栏1</li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
</ul>
</div>
<!--导航栏结束-->
</div>
</body>
</html>
CSS：
.container{height: auto;}
/**顶部菜单**/
.nav{ height:40px;background:url(../images/topbar_bg.gif) repeat-x; margin-top: 0px; padding-top: 0px;line-height: 40px;}
ul{list-style: none; white-space: nowrap;}
ul li{ margin: auto 20px; padding: 0; color: #BFBFBF;display: inline; height: 40px; }
.logo{}
.navleft{}
我现在在写一个导航栏，用ul水平平铺，但是现在遇到了一个问题，就是要使我用float:left，那么在浏览器里放大页面会发现导航栏会乱掉，要使用display: inline;和white-space: nowrap;可以实现水平平铺，而且在浏览器中放大页面不会乱，但问题来了，用display: inline;和white-space: nowrap;后，里面的文字无法垂直居中，我是将ul放在一个div里面了，div想要让ul文字和图片在div里面垂直居中，并且横向排列（IE9无法垂直居中，Chrome就可以），这让人很郁闷，而用float:left就可以垂直居中。
现在有没有什么办法，既可以让ul里面的东西水平平铺，垂直居中而且在浏览器里面方法后不乱的。
代码如下：
HTML：
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body style="margin: 0">
<!--总容器-->
<div class="container">
<!--导航栏开始-->
<div class="nav">
<ul>
<li class="logo"><a href="#">导航栏1</a></li>
<li class=""><a href="#">导航栏1</a></li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
<li class="menu_right"><a href="#"></a>导航栏1</li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
<li class="delimiter"></li>
<li><a href="#">导航栏1</a></li>
</ul>
</div>
<!--导航栏结束-->
</div>
</body>
</html>
CSS：
.container{height: auto;}
/**顶部菜单**/
.nav{ height:40px;background:url(../images/topbar_bg.gif) repeat-x; margin-top: 0px; padding-top: 0px;line-height: 40px;}
ul{list-style: none; white-space: nowrap;}
ul li{ margin: auto 20px; padding: 0; color: #BFBFBF;display: inline; height: 40px; }
.logo{}
.navleft{}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
