精华内容
下载资源
问答
  • 实现li的宽度任意设置,总是在ul中水平居中,实现结果: 关键一点就是给ul设置display:table; 上代码: css样式: * {/*重置样式*/ margin: 0; padding: 0; list-style: none; color: #fff; text...

    实现li的宽度任意设置,总是在ul中水平居中,实现结果:
    在这里插入图片描述
    在这里插入图片描述
    关键一点就是给ul设置display:table;
    上代码:

    css样式:
    	* {/*重置样式*/
                margin: 0;
                padding: 0;
                list-style: none;
                color: #fff;
                text-decoration: none;
            }
            .wrapper {
                background: #008c8c;
                border: 1px solid #000;
            }
            .wrapper ul {
                display: table;		 /*这里是关键步骤:*/
                margin: 0 auto;      /*让ul在div中水平居中 */
                border: 1px solid #f00;
            }
            .wrapper ul::after {     /*清除浮动 */
                content: '';
                display: inline-block;
                clear: both;
            }
            .wrapper ul li {
                float: left;         /*让li浮动起来 横向排列*/
                text-align: center;  /*让li在ul中水平居中*/
                height: 40px;
                line-height: 40px;   /*垂直居中*/
                width: 250px;        /*任意设置li的宽度,不设置宽度的话也可以设置padding*/
            }
    

    htmlCode:

     <div class="wrapper">
            <ul>
                <li><a href="">li宽度任意均可居中</a></li>
                <li><a href="">li宽度任意均可居中</a></li>
                <li><a href="">li宽度任意均可居中</a></li>
                <li><a href="">li宽度任意均可居中</a></li>
                <li><a href="">li宽度任意均可居中</a></li>
            </ul>
        </div>
    
    展开全文
  • 废话不多,贴代码 ...ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <style> ul{...

    废话不多,贴代码

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <style>
    ul{
       height: 30px;
       display: table;
       margin: auto;
       padding: 0;
       text-align: center;
     }
     li{
       float: left;
     }
    </style>

    一般来说是不用table属性的,但是这里我们却用了,table属性,,让ul改为表格格式

    但是!!!敲黑板,划重点

    ul是不需要设置宽度的,不然实现不了li居中显示。

    并且,ul样式中{display:table;text-aline:center}这两个属性是必须的!!!

    转载于:https://www.cnblogs.com/lucio110/p/7422192.html

    展开全文
  • ul中li标签居中问题

    千次阅读 2016-09-28 00:53:24
    ul中li标签居中问题在我们设置ul中的li标签的时候通常会使用float浮动方法,但是这几出现一个问题,我们不能把li居中ul里面,原因是因为我们的li标签默认是块级元素,所以我们不能是其居中。 修改方法:将li标签...

    ul中li标签居中问题

    在我们设置ul中的li标签的时候通常会使用float浮动方法,但是这几出现一个问题,我们不能把li居中在ul里面,原因是因为我们的li标签默认是块级元素,所以我们不能是其居中。
    修改方法:将li标签的display:inline-block;即可。

    展开全文
  • css怎么让ul中li水平垂直居中发布时间:2020-09-14 13:45:59来源:亿速云阅读:228作者:小新css怎么让ul中li水平垂直居中?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能你收获颇深。下面是小...

    css怎么让ul中li水平垂直居中

    发布时间:2020-09-14 13:45:59

    来源:亿速云

    阅读:228

    作者:小新

    css怎么让ul中li水平垂直居中?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

    我们在写轮播图时,底部的小圆点或数字会放在一个ul下li里,这时候一般都要求小圆点或数字垂直居中,今天就写一个简单的li在ul中水平垂直居中。

    轮播图一般有两种,左右轮播和上下轮播,对应的ul中的li也分为水平排列和竖直排列,下面就针对这两种情况分别说明。

    1、轮播图左右轮播,li水平排列:

    • 1
    • 2
    • 3
    • 4

    .box{

    width: 100%;

    height: 200px;

    border: 1px solid red;

    }

    .box ul{

    height: 200px;

    display: flex;

    flex-direction: row;

    justify-content: center;

    }

    .box ul li{

    list-style: none;

    height: 200px;

    line-height: 200px;

    }

    效果:

    ebf42106ec9a81763305f71bd2ef5fe4.png

    2、轮播图上下轮播,li垂直排列:

    • 1
    • 2
    • 3
    • 4

    .box1{

    width: 100px;

    height: 300px;

    border: 1px solid red;

    }

    .box1 ul{

    height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    }

    .box1 ul li{

    list-style: none;

    margin: 0 auto;

    }

    效果:

    9b1b95e378caa6e7f67027ddf5abee95.png

    感谢各位的阅读!看完上述内容,你们对css怎么让ul中li水平垂直居中大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

    展开全文
  • 昨晚群里一个朋友帮忙解决的问题,之前没有遇到过,题目如下:不改变html结构,使导航菜单垂直水平居中,导航宽度自适应屏幕100%,高度30px;单项高度28px,宽80px;兼容:ie6+,ff,chrome,opera等主流浏览器。...
  • 在一个ul中,有很多li列表.要使li居中显示, 需要给li加:display:inline;(不需要加浮动元素了) 给ul加:text-align:center; 转载于:https://www.cnblogs.com/hellome/p/3887221.html...
  • 让ul中li居中显示

    2018-01-23 17:19:00
    利用ul的text-align:center属性: 设置ul的display:table,text-align:center。 注:1.这里必须用display:table属性。 2.不可以设置ul的宽。 下面是一段代码: 1 #nav { 2 height: 30px; 3 ...
  • 上面这个是我自己完成出来的效果这个是所需要完成的效果。具体就是前面的1 2 3 4 与左边的框对齐是怎么做到的?跪求各位大佬5#a{width: 350px;background-color: white;...}#a li div{display: none;t...
  • ul中li水平垂直居中

    万次阅读 2018-01-06 10:37:20
    我们在写轮播图时,底部的小圆点或数字会放在一个ulli里,这时候一般都要求小圆点或数字垂直居中,今天就写一个简单的liul中水平垂直居中。  轮播图一般有两种,左右轮播和上下轮播,对应的ul中li也分为水平...
  • ul 里面的li居中

    2017-11-17 11:54:36
    display:table; text-align:center;在ul里面加入这两个属性就好了 不过不要设置li的宽度 不然就不起作用了
  • ul 标签 li 居中显示

    千次阅读 2016-03-21 11:18:24
    }ul li{dispay:inline-block;}ie6,ie7 不支持inline-block; 可以用inline代替(ie6,ie7垂直高度和padding(无效)了。) 公司简介 企业文化 荣誉资质 一、inline元素都在一行内显示,直到该行排满,对inline元素...
  • CSS中ul li居中的问题

    2018-07-21 19:12:14
    一直以为对ul li居中对齐已经掌握了。但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来
  • html ul li 横排居中排列

    千次阅读 2021-03-21 13:26:07
    <!DOCTYPE html> <... <head> ...meta charset="utf-8">...ul li 横排居中</title> <style type="text/css"> ul { display: flex; flex-flow: row nowrap; justify-cont...
  • ul中li居中问题

    千次阅读 2013-05-21 21:47:37
    以前用ul li做导航居中时,li是定宽的,然后用css的float:left;来实现居中,  今天做网页的时候,发现这个问题有很大的问题,于是google了一下,发现...li的父标签的text-algin:center,就可以实现Li居中的问题,
  • ul li 水平居中

    2016-11-23 21:13:00
    li的float:left方法显然有一个问题...使用这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性改为inline便可实现这种ul li居中的问题。 LI水平居中代码共享CSS如下: #linkna...
  • 使ul中li居中

    2017-07-18 15:35:00
    1、如果li设置了float:left; 解决办法: 1、ul父元素的标签设置:text-align: center; 2、ul设置:display: inline-block; 2、li不设置float:left; 解决办法: 1、ul设置:text-align:center; 2、li设置:...
  • html ul li 横排居中排列

    万次阅读 2018-07-22 17:29:51
    ul li 横排有很多方法,可以使用float, 这里使用的flex方式。 具体查看代码和运行效果图 &lt;!DOCTYPE html&gt; &lt;html&...ul li 横排居中&lt;/title&gt; &lt;sty
  • CSS ul li居中本来以为很容易就实现了,因为平时都是li float:left,这样后面的可以排成一行,对居中没做要求,不过最近搞个项目,必须ui的每个li都居中显示,这可我难为了,没想到一时把我难坏了,不过还是被...
  • 分页居中ul li居中

    2018-08-02 11:13:48
    两种方式 一,利用相对定位和绝对定位。 /*分页*/ .page{  width: 1400px;...//先给ul的父亲加上相对定位  margin-top: 50px; } .page ul{  position: absolute;//ul绝对定位  left: 50%;//向右50% ...
  • ul> <li>我是居中</li> <li>我是居中</li> <li>我是居中</li> <li>我是居中</li> <li>我是居中</li> <li>我是居中</li>...
  • 1、li内容垂直居中 flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列...这样就可以实现ul中li内容的垂直居中。代码如下: HTML部分: 1 2 ...
  • 1、li内容垂直居中 flex-direction属性规定灵活项目的方向。...这样就可以实现ul中li内容的垂直居中。代码如下: HTML部分:      aa  bb  cc  dd     CSS部分:  <styletype=“text/css”> .box{
  • ul中加属性:  ul {  display:block;  padding: 0;  margin:0 auto;  text-align: center;  overflow: hidden;...在ul相对应的li下加属性: ul li {  display: inline;  white-space: nowrap;
  • 我给ul加了宽度之后,只是ul居中,UL里面的li还是float:left排列,怎么实现ul里面的li居中?![图片说明](https://img-ask.csdn.net/upload/201609/27/1474985484_730050.jpg) ``` <!doctype html> 无标题文档 ...
  • ul li 居中设置

    千次阅读 2018-12-14 06:01:26
    希望li处于ul的中间,这样无论JSON数据的多少,读完数据输出时,数据都可以位于中间位置。 ul{ width:80%; margin:auto; } 但是后来发现左边总是会有一块空白间隙,很大,无论怎么设置padding-left 都没用,加...
  • 但是写到后面发现这样写要使liul中居中太麻烦了 但其实只需要两步 1.设置上层元素text-algin:center 2.设置li元素display:inline; #title { text-align:center; } ul li { list-style-type:none; display:...
  • ul li 居中显示

    2016-03-21 10:44:22
    ul li { list-style:none; color:red;  display:inline; width:180px; text-align:center;  line-height:20px;}去掉浮动,改为display:inline;还有就是,为什么你的ulli之间还可以加入一个div呢?难道u
  • ul li 居中排列

    2017-06-04 02:42:47
    css: ul{ display:inline-block; li{ float:left; width:238px; }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,092
精华内容 14,036
关键字:

如何让ul中的li居中