如何使ul中li元素横向排列且不换行_html/css

如何使ul中li元素横向排列且不换行_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:27:37

原创

2626人浏览过

情况如上图所示：
外层div容器宽度固定，ul宽度随li（li宽度固定）的增加而撑开，但是当ul中li的宽度之和大于div时，ul没有撑开，而是li换行了，如何使li不换行？
ul样式如下：
#pic_list
{
display:inline;
white-space: nowrap;
}
li样式如下：
#pic_list li
{
width:80px;
height:80px;
margin:3px;
float:left;
background:red;
display:block;
}
补充说明：即使我将ul的宽度设置为大于div容器宽度的固定值，但是li依然会在div容器的边缘之前换行。
经过研究，应该是float惹的祸，w3cschool的资料如此描述“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止”，我认为li在浮动时并没有碰到ul的框，而是碰到了ul的父容器div的框，但是依然会换行。

Zevi AI

一个服务于电子商务品牌的AI搜索引擎，帮助他们的客户轻松找到想要的东西

查看详情

回复讨论(解决方案)

去掉
float:left;
改成
display:inline-block;

<!DOCTYPE html><html><head><style>#pic_list{display:block;white-space:nowrap;width:500px;overflow:auto;}#pic_list li{width:80px;height:80px;margin:3px;background:red;display:inline-block;}</style></head><div id="pic_list">  <ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>  </ul></div></body></html>

登录后复制

去掉
float:left;
改成
display:inline-block;

谢谢您的回答，效果非常理想。

你的滚动效果是怎么实现的，我在网上看了几个，都是把ul的position设置成absolute，滚动图片的时候，就修改left属性；

但是我设置ul为absolute时，加入到ul中的图片都不显示出来。。。
不设置absolute ，然后修改left，又不知道怎么做？

去掉
float:left;
改成
display:inline-block;

找了半天问题，终于解决了，谢谢。

具体怎么解决的啊，为什么我的还是不行

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> 	<head> 		<style>   			#pic_list { display:block; white-space:nowrap; width:500px; overflow:auto; } 			#pic_list li { width:80px; height:80px; margin:3px; background:red; display:inline-block; } 		</style>   	</head>	<body>		<div id="pic_list">   			<ul style="POSITION: absolute;"> 				<li><a href="javascript:void(0);">主页</a></li>            		 		<li><a href="javascript:void(0);">工作日志</a></li>            		 		<li><a href="javascript:void(0);">设备运行记录</a></li>            		 		<li><a href="javascript:void(0);">其他</a></li>		 		<li><a href="javascript:void(0);">导航1</a></li>				<li><a href="javascript:void(0);">导航2</a></li>				<li><a href="javascript:void(0);">导航3</a></li>				<li><a href="javascript:void(0);">导航4</a></li>				<li><a href="javascript:void(0);">导航5</a></li>				<li><a href="javascript:void(0);">导航6</a></li>				<li><a href="javascript:void(0);">导航7</a></li>				<li><a href="javascript:void(0);">导航8</a></li>				<li><a href="javascript:void(0);">导航9</a></li>				<li><a href="javascript:void(0);">导航10</a></li>				<li><a href="javascript:void(0);">导航11</a></li>				<li><a href="javascript:void(0);">导航12</a></li>				<li><a href="javascript:void(0);">导航13</a></li>				<li><a href="javascript:void(0);">导航14</a></li>				<li><a href="javascript:void(0);">导航15</a></li>				<li><a href="javascript:void(0);">导航16</a></li>				<li><a href="javascript:void(0);">导航17</a></li>				<li><a href="javascript:void(0);">导航18</a></li>				<li><a href="javascript:void(0);">导航19</a></li>     			</ul> 		</div> 	</body> </html>

登录后复制