只要控制了li的宽度,利用浮动就能实现
<style type="text/css"> 
.my ul { 
width: 210px; 

.my li { 
width: 100px; /*如果显示三列 则width改为70px*/ 
float: left; 
display: block; 

</style>

代码如下: 
<div class="my"> 
<ul> 
<li>那些花儿</li> 
<li>那些花儿</li> 
<li>那些花儿</li> 
<li>那些花儿</li> 
<li>那些花儿</li> 
<li>那些花儿</li> 
</ul> 
</div>

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

  1. 如何将文章列表用<li>分两列显示

    我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们? 其实相对比较简单,用几行css样式定义一下就够了,可以用div + css来控制 ...

  2. ul和li实现分两列(多列)布局显示

    简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...

  3. 两个表,一个表中的两列关联另一个表的id,如何将这个表中的两列显示为另一个表id对应的内容

    表A name user owner machine1 1 2 machine2 3 4 表B userid username 1 aaa 2 bbb 3 ccc 4 ddd 以上两个表,表A 设备的 ...

  4. CSS------如何让ul中的li分为两列甚至多列

    转载: http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html 只需要复制ul和li中的style样式即可 如果需要自定义多少列,只需要修改li中的w ...

  5. ReportServices如何在一页中将报表分成两列显示

    创建两个数据集 DataSet1    DataSet2 DataSet1 SELECT   TOP                    (SELECT   (COUNT(*) + 1) / 2 A ...

  6. ul li一行两个显示

  7. Excel 两列单元格合并超级链接的VBA 写法

    Excel 单元格 分两列 (B列存放姓名, C列存放链接) 列如: 姓名 学号 博客地址 1309032022 李汉超 http://www.cnblogs.com/Vpygamalion/ 141 ...

  8. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  9. el-form 每行显示两列,底部按钮居中

    需求: el-form 每行显示两列,底部按钮居中 问题: 以前的解决办法是: el-col, el-row.但是这里只有一个 el-form-item 的 label 数据是已知的,其余项都是循环得 ...

随机推荐

  1. Asp.Net_Form验证跟授权

    配置文件的<system.web></system.web>结点下添加如下代码: <!--身份验证方式--> <authentication mode=&qu ...

  2. centos 7 git的管理和使用

    一.linux 安装git (服务端) 1.首先创建用户账号 useradd zlx passwd zlx .... 2.创建目录git仓库 mkdir zlx_git.git 3.赋权限 chown ...

  3. WebGL模型拾取——射线法二

    这篇文章是对射线法raycaster的补充,上一篇文章主要讲的是raycaster射线法拾取模型的原理,而这篇文章着重讲使用射线法要注意的地方.首先我们来看下图. 我来解释一下上图中的originTr ...

  4. 散列(Hash)表入门

    一.概述 以 Key-Value 的形式进行数据存取的映射(map)结构 简单理解:用最基本的向量(数组)作为底层物理存储结构,通过适当的散列函数在词条的关键码与向量单元的秩(下标)之间建立映射关系 ...

  5. 最近在研究google的angularjs

    最近在研究google的angularjs,先做个简单的例子来试试. <!doctype html> <html lang="en" ng-app="m ...

  6. UVALive 4877 Non-Decreasing Digits 数位DP

    4877 Non-Decreasing Digits A number is said to be made up ofnon-decreasing digitsif all the digits t ...

  7. Ubuntu16.04配置TOMCAT8

    基于虚拟机Ubuntu16.04配置Tomcat过程 一.安装JDK 首先要确定好要安装的jdk和tomcat版本能对的上,具体如图所示: 版本选择是Jdk1.8,首先上官网http://www.or ...

  8. hybrid项目h5页路由回退问题解决

    问题描述: 在hybrid项目里现有h5页A.B.C三个页面,均采用vue开发.其中A.B页采用原生头部,C页采用h5头部.A页通过点击a链接进入B页,B页以同样的方式进入C页,再依次点击各业返回按钮 ...

  9. kickstart自动化安装

    preboot execute environment预启动执行环境--intel开发的技术,计算机可以通过pxe协议从网络引导启动. 工作模式为客户端/服务器端的c/s模式 客户端从远端服务器下载镜 ...

  10. CentOS7 如何修改 内核版本

    1. 参考blog http://www.mamicode.com/info-detail-1758066.html https://www.cnblogs.com/sexiaoshuai/p/839 ...