<!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. 【麦克风阵列增强】Delay and sum beamforming

    作者:桂. 时间:2017-06-03  15:40:33 链接:http://www.cnblogs.com/xingshansi/p/6937576.html 前言 本文主要记录麦克风阵列的几个基 ...

  2. 通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/

      前  言  PHP     通过上一篇博客,注册账号与登录页面--前后台数据交互  跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...

  3. 详解ES6中的 let 和const

      前  言 JRedu ECMAScript 6 是 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性. ES6 与上一个版本 ES5 的所有不同之处,对涉及的语 ...

  4. jquery判断按钮是否被选中了

    <script type="text/javascript"> function genjin_view2(elm){ if($(elm).attr("che ...

  5. 【hexo】如何在一个小时内搭载个人博客

    版权申明:本文为博主原创文章,未经博主允许不得转载.如需转载,请私聊博主. 什么是hexo Hexo是一个开源的静态博客生成器,用node.js开发,作者是台湾大学生tommy351. 前期准备 安装 ...

  6. if和for的几个经典题目

    1.有一对幼兔,幼兔1个月后长成小兔,小兔1个月后长成成兔并生下一对幼兔,问几年后有多少对兔子,幼兔.小兔.成兔对数分别是多少. 幼兔 1 小兔 0 成兔 0幼兔 0 小兔 1 成兔 0 幼兔 1 小 ...

  7. spring auto-config

    spring security auto-config auto-config配置 <http auto-config="true"> </http> 自动 ...

  8. C# 来做 视频播放 视频流处理 转码 实时传输

    最近一直在研究视频实时查看播放 很遗憾 只成功了一半 记录一下历程 以便大家相互交流 项目需求是  GPS 视频设备  连接服务器  将视频流走RTP  协议发送到服务器 服务器将接收的视频流 传输给 ...

  9. Android 任何位置的可移动悬浮窗

    刚好要做这块的东西,所以网上翻了下资料,百度出来的基本上都是:默认起始位置左上角,还不能改动,一改动起始位置,第二次拖动就不正常了~~ 下面直接附上任意位置可拖动的源码(由于是demo写的比较乱): ...

  10. Spring中对资源的读取支持

    Resource简单介绍 注:所有操作基于配置好的Spring开发环境中. 在Spring中,最为核心的部分就是applicationContext.xml文件,而此配置文件中字符串的功能发挥到了极致 ...