让ul中li分列显示,用li显示两列如下(要显视多列的自己想办法,哈哈):
2列

<ul>
<li style="display:block;float:left;width:50%"><a href="url">a</a> </li>
<li style="display:block;float:left;width:50%"><a href="url">b</a> </li>
</ul>
1
2
3
4
<ul>
  <li style="display:block;float:left;width:50%"><a href="url">a</a></li>
  <li style="display:block;float:left;width:50%"><a href="url">b</a></li>
</ul>

3列
改为 33.3%

4列
改为 25%

IE兼容 火狐 Google浏览器 兼容

用在显示小说章节列表 多列显示的用途上
这个是 3列 33.3% 3/100

ul中li分列显示的更多相关文章

  1. ul中li居中显示的table方法

    废话不多,贴代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4 ...

  2. ul、li分列显示

    目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示. 方法1,使用DIV+CSS代码: <style type="text/css"> .my ...

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

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

  4. Jquery和JS获取ul中li标签(转)

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

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

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

  7. <UL>中<li>标签前编号图片的简单调用

    <style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http:// ...

  8. 如何获取ul 中li选中的值点击button按钮跳转链接

    <ul id="parent"> <li></li> <li></li> <li></li> & ...

  9. 关于ul中li不对齐的问题

    将li中加入 overflow:hidden;    即可. 同时overflow:auto  可以控制滚动条的出现.

随机推荐

  1. 善用log日志

    #-*- coding:utf-8 -*- import logging logger = logging.getLogger() #定义一个log日志对象 hdlr = logging.FileHa ...

  2. magento模板中XML与phtml关系 [四]

    layout\catalogserch.xml 中声明的 as="topSearch" 被templ\page\html\header.phtml调用输出 echo $this-& ...

  3. yii migrate 设计博客

    yii migrate/create create_blog_table该命令生成的迁移文件位于 advanced\console\migrations 目录,可能你已经注意到了,yii migrat ...

  4. linux下提示bash:command not found

    新安装的linux系统,如果进行精简安装可能会出现bash:command not found 的提示,大家在安装的时候可以选择默认安装basic的组件,一般即可.到时候可以再升级.   如果新装的系 ...

  5. EasyUI知识点

    1. easyUI实现动态列,js实现 $('#dg').datagrid({ height: 340, url: '${path}/salary/datas.do', method: 'POST', ...

  6. (中等) CF 311B Cats Transport,斜率优化DP。

    Zxr960115 is owner of a large farm. He feeds m cute cats and employs p feeders. There's a straight r ...

  7. Oracle使用rowid删除重复记录

    /**如何删除重复记录?*//*1. 先按重复字段分组   2. 在每组里找出最小的rowid   3. 把整个表中与上面查询出来的rowid不相等的记录删除掉*/delete from test_t ...

  8. Android非常实用的开源项目框架

    我将文章中所描述的项目都集成在一个apk中,可以直接运行查看效果,2.2以上的机器都可以运行.因为不让直接上传apk文件,我压缩成了zip包 1. Universal-Image-Loader 实现异 ...

  9. (三)Jquery Mobile按钮详细讲解

    Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button        ...

  10. 自己动手编译octave 4.0.0

    今天在做作业的时候,发现imread不能使用,说要安装相应的图形包,可是要安装image时,却发现要求4.0.0版本,而我本机的linux系统ubuntu15.04只有3.8.x的安装源,没办法,只能 ...