CSS 如何让li横向居中显示

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

[html] view plaincopy

<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>

[html] view plaincopy

<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;

[css] view plaincopyprint?

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

今天碰到一个很想解决的问题，又解决不了的问题，正好有人和我一样，高手帮他解决了，

让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>

转载于:https://www.cnblogs.com/telwanggs/p/7346995.html

CSS 如何让li横向居中显示相关推荐

网页html 图片横向摆放,css实现多张图片横向居中显示的方法
先讲一下实现的步骤: 最终效果 2. 代码实现 HTML部分分类小贴士 CSS部分 .main{ width:100%; margin-top:40px; } .main .tag{ margin: ...
css 两个div一行居中显示,CSS：多个DIV在同一行居中显示的一种实现方法
在项目开发中,画面经常有多个DIV的内容显示在一行的要求. 比如HTML 你好,这是div1的第一行. 你好,这是div1的第二行你好,这是div2的第一行. 你好,这是div3的第一行. 你好,这 ...
css如何让背景上下居中显示,CSS有哪些方式可以实现垂直居中？
大家好,我是IT修真院郑州分院第四期的学员汪开放,一枚正直纯洁善良的web程序员今天给大家分享一下,CSS有哪些方式可以实现垂直居中? 1.背景介绍 44年前我们把人送上月球,但在CSS中我们仍然不 ...
html 怎么自动让图片居中显示,css中怎样让图片居中显示？
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放
图片全屏覆盖我们可能希望实现图片的全屏覆盖,这种覆盖是随着网页大小而调整的,而不是固定的,怎么做呢? 请看以下CSS代码: body{background:url("img.jpg&quo ...
CSS实现div的嵌套居中显示的多种方式
1.通过flex方式实现:将父盒子的position属性设置为relative,并且display设置为flex,最后设置水平居中和垂直居中.这样设置后,子盒子不需要设置什么,就会实现居中.哪个盒子需 ...
css怎样不换行显示出来,css如何实现li不换行显示
实现方法:1.使用display属性将li转成行内或是行内块标签,只需要给li设置"display:inline|inline-block"样式即可:2.使用float属性进行浮动 ...
html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中. display属性实现图片居中的两种方法: 1 ...
html div背景自动居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法...
写这篇水文呢,也是最近在自己在魔改一个主题用作新做的班级网站. 发现模版的背景图片以及其他地方的图片显示只能在电脑端看到,而在移动端不能够自适应.顺便也整理出来. 首先是图片的居中自适应: 需要先给C ...

CSS 如何让li横向居中显示

CSS 如何让li横向居中显示相关推荐

最新文章

热门文章