先给一个简单的示例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. 爸爸和儿子的故事带你理解java线程

    今天回想线程方面的知识,发现一个非常有意思的小程序.是用来说明多线程的以下贴出来分享下,对刚開始学习的人理解线程有非常大的帮助 爸爸和儿子的故事 <span style="font-f ...

  2. 重构——Martin Fowler 阅读笔记

    重构的第一步: 为即将修改的代码建立一组可靠的测试环境. 和任何重构手法一样,当提炼一个函数时,我们必须知道可能出什么错. 安全步骤: 首先在一个函数内找到局部变量和参数.任何不会被修改的变量都可以被 ...

  3. Hibernate连接数据库

    包结构如下图所示(按图标进行对齐): 环境搭好后代码分为以下几步: /** * private static final Configuration CONFIGURATION; * private ...

  4. 安装linux系统-CentOS-6.8-x86_64-minimal.iso

    1: 2: 3:单击[Next]继续安装. 4:安装语言,选择[Chinese(Simplified)(中文(简体))]菜单,单击[Next]继续. 5:系统键盘,选择[美国英语式]菜单,单击[下一步 ...

  5. ubuntu安装wine 安装QQ

    安装最新版 wine sudo dpkg --add-architecture i386 sudo add-apt-repository ppa:wine/wine-builds sudo apt-g ...

  6. Eclipse 工程配置与目录结构及各种文件夹（常用插件）

    .classpath..project 是 Eclipse 工程所必须的文件. OpenExplorer: 该 jar 包的下载地址:samsonw/OpenExplorer 安装配置方法:eclip ...

  7. luogu 3952 时间复杂度

    noip2017 D1T2 时间复杂度 某zz选手考场上写了1.5h 考完之后发现自己写的是错的 但是结果A了??? 题目大意: 一种新的编程语言 A++ 给出一个程序只有循环语句 并给出这个程序的时 ...

  8. 打印二叉树中距离根节点为k的所有节点

    package tree; public class Printnodesatkdistancefromroot { /** * Given a root of a tree, and an inte ...

  9. android View页面布局总结 最全总结（转）

    下面是我在工作中总结的内容,希望对大家有帮助. 一.布局 View的几种布局显示方式有下面几种:线性布局(LinearLayout).相对布局(RelativeLayout).表格布局(TableLa ...

  10. 乐搏讲自动化测试- Python环境搭建（7）

    Python的下载和安装 Python可应用于多平台包括 Linux 和 Mac OS X.你可以通过终端窗口输入 "python" 命令来查看本地是否已经安装Python以及Py ...