先给一个简单的示例HTML代码

  1. <body>
  2. <form id="form1" runat="server">
  3. <div id="title">
  4. <ul id="list" >
  5. <li>标题一</li>
  6. <li>标题二</li>
  7. <li>标题三</li>
  8. <li>标题四</li>
  9. <li>标题五</li>
  10. </ul>
  11. </div>
  12. </form>
  13. </body>
  1. <body>
  2. <form id="form1" runat="server">
  3. <div id="title">
  4. <ul id="list" >
  5. <li>标题一</li>
  6. <li>标题二</li>
  7. <li>标题三</li>
  8. <li>标题四</li>
  9. <li>标题五</li>
  10. </ul>
  11. </div>
  12. </form>
  13. </body>

以前为了让li中的元素横向并列展示，总是对li设置float:left。效果如下。

但是我想让标题居中显示是除了设置margin-left外没有别的办法。这还不能绝对剧中。

后面发现只需要简单的两部。

一，设置li的 display:inline;就可以让其横向展示。

二，设置上一层DIV的text-align:center;

  1. #title
  2. {
  3. text-align:center;
  4. }
  5. ul li
  6. {
  7. list-style-type:none;
  8. display:inline;
  9. }

今天碰到一个很想解决的问题，又解决不了的问题，正好有人和我一样，高手帮他解决了，

让ul在一个div中居中显示，li浮动后ul就整个靠左了。
后来在高手的帮助下终于搞定了代码如下：
<style>
.box{border:1px solid #000000;width:800px;margin:auto;}
ul,li{margin:0px;padding:0px;}
.box ul li{border:1px solid #333333;background:#CCCCCC;color:#000000;/*width:60px;*/text-align:center;
/*float:left;*/margin-right:5px; list-style:none}
        
.box {*text-align:center;}
ul {display:table;margin-left:auto;margin-right:auto;}
ul li{float:left;*float:none;*display:inline;*zoom:1;}
</style>
<div class="box">
     <ul>
         <li>12313</li>
         <li>by jubdit</li>
         <li>12313</li>
     </ul>
   <br clear="left" />
</div>

CSS 如何让li横向居中显示的更多相关文章

  1. 清除li内a标签的float=left实现a标签在li内居中显示(ul内li不居中显示)

    写在前面: 修改cnblogs主页面菜单显示问题. 问题描述:在给主菜单添加hover样式后发现菜单内容并未居中.见图1. 网上搜索到资料其中一篇讲的可以说简明扼要了,也是伸手党的福利(点我查看原文) ...

  2. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  3. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  4. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

  5. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

  6. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

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

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

  8. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

随机推荐

  1. bzoj 1266 [AHOI2006] 上学路线 route 题解

    转载请注明:http://blog.csdn.net/jiangshibiao/article/details/23989499 [原题] 1266: [AHOI2006]上学路线route Time ...

  2. java实现floyd统计天津地铁的网站距离

    一:说明 (1)使用floyd实现各个网站的计算记录和路径 (2)网站获取和初始距离依据外部文件得到 (3)结果以外部文件的形式存储 (4)网站间转乘,觉得初始值也为1 (5)代码凝视比較具体,如有疑 ...

  3. OCP-1Z0-051-题目解析-第21题

    21. Examine the description of the EMP_DETAILS table given below:  name               NULL           ...

  4. asp.net mvc 的 视图（view ）的模块化开发

    目前所在项目有一个视图,几个模块都涉及到,对应不同的开发人员,虽然有SVN在管理,但代码冲突时有发生.并且大家的代码挤于其中,逻辑比较容易混乱. 将不同部件独立出去,实有必要. 分离方式,我知道的有 ...

  5. luogu1966 火柴排队

    题目大意 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度.现在将每盒中的火柴各自排成一列,同一列火柴的高度互不相同,两列火柴之间的距离定义为: $\sum_{i=1}^n(a_i-b_i) ...

  6. aarch64-linux-gnu交叉编译Qt4.7.3

    到 Qt 官网下载合适的 Qt 版本,地址:http://download.qt-project.org/archive/qt/ 1.环境搭建: 1.安装automake.libtool 和主机上的 ...

  7. 龙尚3G、4G模块嵌入式Linux系统使用说明【转】

    本文转载自;http://blog.csdn.net/zqixiao_09/article/details/52506812 驱动部分: 1.kernle/drivers/usb/serial/opt ...

  8. XML解析方式汇总

    XML解析方式汇总 分类: XML2011-08-23 19:19 167人阅读 评论(0) 收藏 举报 xmlstringexceptionattributesclassiterator DOM解析 ...

  9. 【转】Material Design 折叠效果 Toolbar CollapsingToolbarLayout AppBarLayout

    我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...

  10. web filter用spring注入对象

    tomcat容器初始化顺序监听器–>过滤器–>servlet,因此springMVCservlet初始化之前,过滤器就已经初始化过了,如果在过滤器中需要注入spring容器管理的bean是 ...