CSS 如何让li横向居中显示

原创 2012年03月22日 19:25:52

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

<body>
    <form id="form1" runat="server">
    <div id="title">
    <ul id="list" >
    <li>标题一</li>
    <li>标题二</li>
    <li>标题三</li>
    <li>标题四</li>
    <li>标题五</li>
    </ul>
    </div>
    
    </form>
</body>

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

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

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

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

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

#title
     {
      text-align:center;
     }
     ul li
     {
       list-style-type:none;
       display:inline;
     }


<ul><li></li></ul>之间的文字居中水平显示

#linknav{height:140px;} #linknav ul{text-align:center;list-style-type:none;} #linknav ul li{displa...

CSS 如何让li横向在div居中显示

直接上代码,复制一下代码到.text中,修改后缀名为.html,直接运行看效果 如图所示:,同时适用于手机端显示。 .box {     border:1px solid #000000;  ...

html——ul、li导航栏居中的两种办法

总结了下导航栏的制作方法:一种是用float设计,提前设置好高度与宽度,然后将要显示的元素设置为float::left依次显示。 ji...

CSS 如何让li横向居中显示

先给一个简单的示例HTML代码 [html] view plaincopyprint? body>      form id="form1" runat="server">...

ul,li不能左右居中的问题

最近帮朋友做一个他们公司的商品网站,用到了以前学到的html+css技术,当然做网站少不了Javascript和jquery这些.....       声明了ul,li的样式,始终找不到错误,怎么也不...

如何让浮动后的li在ul中居中显示

其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; li 再设 display: inline; 就可...

CSS中<li>标签横向排列出现间距问题

HTML代码块: 公告 规则 论坛 安全 公益 CSS代码块: #tabControl .tab-header ...

让li 横排显示的CSS代码

方法一:直接在里面加样式来实现横排字体横排字体 点评:此种方法简单易操作,如果是写在模板中循环的话,会造成代码大量重复。方法二:通过定义ul li 来实现ul{list-style-type:none...

li中的图片垂直居中

/*如何将IMG图片居中了,我们需要更改一下上面片段代码的格式*/                                     /*改好格式后我们写下面的...
  • XPY567
  • XPY567
  • 2015年12月01日 18:36
  • 616

HTML中的<UL>标签中li横向排列

第一步、编写横向菜单的HTML代码架构请将以下代码添加到HTML文档的导航栏区域中。menu"> Baidu.Com Code52.Net Yahoo.Com Google.Com 第二步、...
  • leewokan
  • leewokan
  • 2011年07月22日 20:10
  • 156587
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 如何让li横向居中显示
举报原因:
原因补充:

(最多只允许输入30个字)