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

关键是对ul元素设置display:block;white-space:nowrap;
对li元素的宽度和高度进行设置，当设置百分比的时候可以达到均分的目的

html中ul元素水平排列问题的更多相关文章

  1. N个数组中所有元素的排列组合（笛卡尔积）算法

    (1)N个数组对象中所有元素排列组合算法 private List<List<Object>> combineAlg(List<Object[]> nArray) ...

  2. ul中li元素横向排列且不换行

    ul { white-space: nowrap; } li { display: inline-block; }     white-space 属性设置如何处理元素内的空白. normal 默认. ...

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

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  4. 1.6.1- HTML中ul元素无序列表的使用

    无序列表的各个列表项之间没有顺序级别之分,是并列的,语法如下: <ul> <li>列表项1</li> <li>列表项2</li> <l ...

  5. 在bootstrap中让竖向排列的输入框水平排列

    在bootstrap中可以使用自带的样式标记来控制样式,但是同时可以利用最原始的css样式来解决达到需求 如下所示可以看出来两个inline-block就可以使得两个水平排列 block和inline ...

  6. li 水平排列并自动填满 ul

    找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...

  7. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  8. justify-content 定义子元素在父元素水平位置排列的顺序

    justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值)  左对齐 2.flex-end 右 ...

  9. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

随机推荐

  1. laytpl : 一款非常轻量的JavaScript模板引擎

    //假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...

  2. 快速上手 Kotlin 的 11 招

    本文转载自 Kotlin 公众号(KotlinX) 作者:bennyhuo 最近经常会收到一些 "用 Kotlin 怎么写" 的问题,作为有经验的程序员,我们已经掌握了一门或者多门 ...

  3. 浅谈this那些事

    一直以来,对this的讨论都是热门话题.有人说掌握了this就掌握了JavaScript的80%,说法有点夸张,但可见this的重要性.本人至今也是记录了很多关于this的零碎笔记,今天就来个小结. ...

  4. python学习-面向对象

    面向对象 编程方式的区别 过程式编程 函数式编程 面向对象式编程 面向对象编程 对象是类的一个实例 创建 class foo(): def __init__(self): #类的构造方法 pass d ...

  5. EF之通过不同条件查找去重复

    Enumerable.Distinct<TSource> Method(IEnumerable<TSource>, IEqualityComparer<TSource&g ...

  6. ASP.NET MVC开发学习过程中遇到的细节问题以及注意事项

    1.datagrid中JS函数传值问题: columns: { field: 'TypeName', title: '分类名称', width: 120, sortable: true, format ...

  7. SQL Server 使用ROW_NUMBER实现的高效分页排序

    declare @pageNum int declare @pageSize int select * from (select ROW_NUMBER() over(order by a_Creati ...

  8. Unity3D常用 API 之实例化与销毁

    1.实例化游戏物体 1.1.游戏中的案例介绍 在很多 MMORPG 类的游戏中都有类似于“金钱副本”的副本关卡.在这类副 本中通常都是限定一个时间,在这个时间内玩家可以尽情的破坏,然后收集金钱. 分析 ...

  9. Bash中的数学计算

    一.整数计算 1.整数 $delare -i num$num=5+5$echo $num10 $num="5 + 8"$echo $num13注意:算式中如果有空格,需要用引号引起 ...

  10. [译]WPF MVVM 架构 Step By Step(5)（添加actions和INotifyPropertyChanged接口）

    应用不只是包含textboxs和labels,还包含actions,如按钮和鼠标事件等.接下来我们加上一些像按钮这样的UI元素来看MVVM类怎么演变的.与之前的UI相比,这次我们加上一个"C ...