Heim > Artikel > Web-Frontend > 如何使ul中li元素横向排列且不换行_html/css_WEB-ITnose
如何使ul中li元素横向排列且不换行_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:27:372259Durchsuche
情况如上图所示：
外层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的框，但是依然会换行。
回复讨论(解决方案)
去掉
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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：一个排版，不知道如何做。_html/css_WEB-ITnoseNächster Artikel：帮忙修改下这段程序，实现哪两个功能_html/css_WEB-ITnose