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

外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行?

解决方法:主要是外面容器设置为white-space:nowrap;li设置为display:inline-block;而不是float:left;

<!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>

时间: 2024-10-05 22:50:10

如何使ul中li元素横向排列且不换行的相关文章

li元素右浮动会出现换行

li元素右浮动会出现换行:一般情况下想让块级元素在一行显示,可以为元素施加浮动,但是有时候表现却并非如人愿,会出现换行的情况.看如下代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂

Jquery和JS获取ul中li标签

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

用ul、li做横向导航

/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */}/* 所有class为menu的div中的ul中的li样式 */div.menu ul li{ float:left; /* 向左漂移,

如何使html中的元素不被选中

有时候,为了提高用户的体验度,需要使网页中的部分内容防误操作,不被选中,比如今天的商城项目中的一个细节部分: + —号其实是a标签做的,当连续点击多次,就会使符号被选中,这样感觉起来不太好,于是查找解决办法,在一个网友的博客中找到了相关的解决办法[http://www.dewen.io/q/5443]: 于是在行间添加以下代码: onselectstart="return false" style="-moz-user-select: none;" 就可以使元素不被

&lt;UL&gt;中&lt;li&gt;标签前编号图片的简单调用

<style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http://top.baidu.com/img/icon-num.gif) no-repeat 0px 5px} .men ul li{ padding-left:20px; line-height:25px;} </style> <body> <div class="men&qu

form 元素横向排列

<section id="contact"> <div class="lj"> <div class="container"> <div class="row"> <div class="col-md-6"> <h2> <span class="glyphicon glyphicon-send"><

如何在Html的CSS中去除&lt;li&gt;标签前面小黑点,和ul、LI部分属性方法

div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见. 2.在相关的页面找到head部分写入下面的代码<style type="text/css">list-style:none;</

Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除.1.在CSS中写入代码.找到相关性的CSS,在..li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见.2.在相关的页面找到head部分写入下面的代码<style type="text/css">list-style:none;</st

使有序序列中每个元素最多出现2次的几种算法实现

问题描述(来源:leetcode--Remove Duplicates from Sorted Array II) 对于一个给定的已排序序列,要求实现一个算法:使序列中同一元素出现的次数不超过2次,对超过2次的同一元素直接删除,例如: 输入:给定序列A={1,1,1,2,2,3} 输出:要求返回length =5,A变为{1,1,2,2,3} 一.实现1 1.方式:该实现使用计数count,比较直观,而较容易想到,且扩展性较好,如果想将条件改为:最多出现n次,只需将条件count!=2改为cou