先给一个简单的示例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. xib或者storyboard设置颜色偏问题(与代码设置颜色不一致)

    选中xib中的label,在右边栏的第三个标签页中第三项是User Defined Runtime Attributes 添加一个keyPath,keyPath值为layer.borderWidth, ...

  2. mysql正则表达式及应用

    mysql where子句的模式匹配 今天在应用中遇到了这样的一个问题,有一个字段 t1,其中的值类似于:1,1,1,2,3,3,4,4,5,5,2,4,3,2,1,2 需要从里面搜索出比如说:第一个 ...

  3. Centos下mahout安装与配置

    对于Mahout的安装与配置,须要一个前提.就是hadoop已经安装. 假设没有安装能够參考. http://blog.csdn.net/u012965373/article/details/4533 ...

  4. Credit Risk Scorecards Credit Risk Modeling 评分卡 KS AR

    https://cn.mathworks.com/help/finance/creditscorecard.validatemodel.html?requestedDomain=www.mathwor ...

  5. vijos - P1077克隆龙 (找规律 + 指数型母函数 + python)

    P1077克隆龙 Accepted 标签:[显示标签] 描写叙述 如今龙的克隆已成为可能,龙基因由ACTG字母组成,而龙的基因有例如以下特点: 1.A在基因中的出现为偶数次(包含0): 2.C的情况也 ...

  6. Java IO --ByteArrayOutputStream （六）***

    Java提供了很丰富的io接口,已经可以满足我们大部分读取数据的需求,这个在C读取数据需要自己定义缓冲区数组大小,而且要小心翼翼的防止缓冲区溢出的情况相当不同.一般情况下我们读取的数据都是直接读取成为 ...

  7. Integer值判断是否相等问题

    昨天在开发中遇到一个问题,定义了两个Integer变量,暂且定义为Integer a;  Integer b; 这两个值由前端赋值并传到后台,前台传的是a = 12345, b = 12345,  但 ...

  8. 【145】◀▶ .NET Framework类库索引

    C#编程基础: A1 ………… 基础A2 ………… using 关键字A3 ………… as 关键字A4 ………… is 关键字A5 ………… switch 关键字A6 ………… return 语句关键 ...

  9. E20180124-hm

    introspection n.自我反省; 反省,内省; capacity n. 容量; 性能; 才能; 生产能力; synthesize vt. 综合; 人工合成; (通过化学手段或生物过程) 合成 ...

  10. 人脸识别（初学篇）-VS2015+opencv3.2的配置

    初学人脸识别,感觉安装也是一个很大的麻烦. 写在这里记录一下吧 一:先安装好我们需要的软件 首先安装Vs2015,在官网或者csdn搜一下应该找的到. 安装步骤没有太多讲究. 点击exe文件,我选择的 ...