先给一个简单的示例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. mysql 將時間戳直接轉換成日期時間

    from_unixtime()是MySQL裏的時間函數 Sql代碼 select uid,userid,username,email,FROM_UNIXTIME(addtime,'%Y年%m月%d') ...

  2. Hdu2111

    <span style="color:#6600cc;">/* J - Saving HDU Time Limit:1000MS Memory Limit:32768K ...

  3. 图像处理之基础---图像缩放中的双线性插值c实现

    在进入频域变换之前, 我们还是轻松一下,再搞点平面上的变化来看看.这把选了一个双线性插值(Bilinear interpolation)来实现是源于看到了csdn上别人的问题, 权且实现一个函数,方便 ...

  4. P2030 遥控车

    P2030 遥控车 2通过 11提交 题目提供者LittleZ 标签二分字符串递推高精洛谷原创 难度尚无评定 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 平平带着韵韵来到了游乐园,看 ...

  5. 【CSU 1079】树上的查询

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1079 现有一棵有N个顶点的树,顶点的标号分别为1, 2, …, N.对于每个形如a b k的询问, ...

  6. POJ2127 Greatest Common Increasing Subsequence

    POJ2127 给定两个 整数序列,求LCIS(最长公共上升子序列) dp[i][j]表示A的A[1.....i]与B[1.....j]的以B[j]为结尾的LCIS. 转移方程很简单 当A[i]!=B ...

  7. Python print 输出不换行，只有空格

    for x in open("/home/soyo/桌面/中期内容/6.txt"): print x, ,,,]: print x, #print 输出没有换行,只有空格 结果: ...

  8. NetCore Netty 框架 BT.Netty.RPC 系列随讲 —（前序） REST API 与 RPC 经典网络基础服务架构

    在服务体系架构内,我们所知道的,有两种请求模型: Http 请求模型,以及 RPC 请求模型.因此,在一个互联网请求模型架构上,都是这两种的请求模型的向互组合. 下面给出两种常见的互联网经典基础架构图 ...

  9. loadrunner11 安装破解，汉化包

    说说自己的心痛史,好不容易安装了loadrunner 11 居然浏览器不支持,我的系统是win8.1,ie浏览器最低支持ie11,我还能说啥子...其他浏览器试过了依旧是不可以!!所以我安装了一个虚拟 ...

  10. Linux文件详解

    一.Linux文件类型分:普通文件.目录文件.链接文件.设备文件.管道文件. 1.普通文件:由ls -al显示属性时,第一个属性为 [-],例如 [-rwxrwxrwx].包括: 纯文本文件(ASCI ...