先给一个简单的示例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. Android系统之路(初识MTK) ------ OTA打包ROM安装系统img等到ZIP

    在做OTA升级包的时候,我编译了好多次都没过.老是IO异常.刚開始以为是我 make 的错误.后来多次检查 Error 发现是我的配置信息写错了,与驱动project师一起检查源代码, 改动配置信息后 ...

  2. [DLX+bfs] hdu 4069 Squiggly Sudoku

    题意: 给你9*9的矩阵.对于每一个数字.能减16代表上面有墙,能减32代表以下有墙. .. 最后剩下的数字是0代表这个位置数要求,不是0代表这个数已知了. 然后通过墙会被数字分成9块. 然后做数独, ...

  3. Codeforces Round #233 (Div. 2)D. Painting The Wall 概率DP

                                                                                   D. Painting The Wall ...

  4. YTU 2634: E3 继承了，成员函数却不可访问

    2634: E3 继承了,成员函数却不可访问 时间限制: 1 Sec  内存限制: 128 MB 提交: 521  解决: 435 题目描述 下面的程序中,派生类Derive继承自基类Base,mai ...

  5. POJ 2590:Steps

    Steps Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7872   Accepted: 3612 Description ...

  6. xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is

    method: select Xcode version in Command Line Tools in Location(Click Xcode and then Preferences) Bef ...

  7. JFreeChart基础(1) (转自 JSP开发技术大全)

    JFreeChart基础(1) (转自 JSP开发技术大全) JFreeChart是一个Java开源项目,是一款优秀的Java图表生成插件,它提供了在Java Application.Servlet和 ...

  8. 关于redis、memcache、mongoDB的对比

    从以下几个维度,对 Redis.memcache.MongoDB 做了对比.1.性能都比较高,性能对我们来说应该都不是瓶颈.总体来讲,TPS 方面 redis 和 memcache 差不多,要大于 m ...

  9. CodeFirst建模：DataAnotation

    示例一 新建一个控制台应用程序,并安装entityframework 新建一个文件Blog.cs类,输入以下代码: using System.ComponentModel.DataAnnotation ...

  10. poj1286 Necklace of Beads—— Polya定理

    题目:http://poj.org/problem?id=1286 真·Polya定理模板题: 写完以后感觉理解更深刻了呢. 代码如下: #include<iostream> #inclu ...