精华内容
下载资源
问答
  • 实现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>
    
    展开全文
  • 在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。web前端学习...

    在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。

    web前端学习:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com

    1、li内容垂直居中

    flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:

    HTML部分:

    <div class="box">
     <ul>
     <li>aa</li>
     <li>bb</li>
     <li>cc</li>
     <li>dd</li>
     </ul>
    </div>

    CSS部分:

    <style type="text/css">
     .box{
     width: 300px;
     height: 300px;
     border: 1px solid red;
     }
     .box ul{
     height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     }
      
     .box ul li{
     list-style: none;
     margin: 0 auto;
     }
    </style>

    效果图:

    07a8ca02e4f9b53da98cf081e797337b.png

    2、li内容水平居中

    flex-direction 属性规定灵活项目的方向。当设置它的属性值为row时(默认值),表示灵活的项目将水平显示,正如一个行一样。 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下:

    HTML部分:

    <div class="box">
     <ul>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     </ul>
    </div>

    CSS部分:

    <style type="text/css">
     .box{
     width: 100%;
     height: 200px;
     border: 1px solid #000;
     }
     .box ul{
     height: 200px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     }
     .box ul li{
     list-style: none;
     height: 200px;
     line-height: 200px;
     }
    </style>

    效果图:

    72e6ee3eb2a5f4d27611f9abc9df80b2.png

    总结:以上介绍了ul中li标签内容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己动手尝试,看看你能不能实现li内容居中的效果,希望这个教程可以帮助到你!

    以上就是图文详解ul中li内容垂直居中和水平居中的方法的详细内容,更多请关注我哦!!!!!!

    展开全文
  • 在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。web前端学习...

    在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中。感兴趣的朋友继续往下看吧。

    web前端学习:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)zhuanlan.zhihu.com

    1、li内容垂直居中

    flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:

    HTML部分:

    <div class="box">
     <ul>
     <li>aa</li>
     <li>bb</li>
     <li>cc</li>
     <li>dd</li>
     </ul>
    </div>

    CSS部分:

    <style type="text/css">
     .box{
     width: 300px;
     height: 300px;
     border: 1px solid red;
     }
     .box ul{
     height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     }
      
     .box ul li{
     list-style: none;
     margin: 0 auto;
     }
    </style>

    效果图:

    19f482f15d0f282863c1be15f27d24a1.png

    2、li内容水平居中

    flex-direction 属性规定灵活项目的方向。当设置它的属性值为row时(默认值),表示灵活的项目将水平显示,正如一个行一样。 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下:

    HTML部分:

    <div class="box">
     <ul>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     <li>今天心情不错</li>
     </ul>
    </div>

    CSS部分:

    <style type="text/css">
     .box{
     width: 100%;
     height: 200px;
     border: 1px solid #000;
     }
     .box ul{
     height: 200px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     }
     .box ul li{
     list-style: none;
     height: 200px;
     line-height: 200px;
     }
    </style>

    效果图:

    689934441be6f4ca4d28ce2f0553cf4a.png

    总结:以上介绍了ul中li标签内容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己动手尝试,看看你能不能实现li内容居中的效果,希望这个教程可以帮助到你!

    以上就是图文详解ul中li内容垂直居中和水平居中的方法的详细内容,更多请关注我哦!!!!!!

    展开全文
  • 如何让浮动后的liul中居中显示

    万次阅读 2017-03-29 21:25:22
    其实,只要 ul 父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; li 再设 display: inline; 就可以了。 html标签 div id="footer"> ul> li>内容li> ul> div> css...

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

    html标签

    <div id="footer">
          <ul>
                <li>内容</li>
          </ul>
    </div>

    css样式

    复制代码
    #footer {
        text-align: center;
    }
    #footer ul {
        display: inline-block;
        overflow: auto;
    }
    
    #footer ul li {
        display: inline;
        float: left;
    }
    复制代码


    这样其实是让ul在父元素中居中了,不过达到了我们想要的效果,还有就是我觉得其实没必要再给li设置display:inline;因为给一个元素设置position:absolute和float后会隐式的将该元素改变为inline-block。

    转载自http://www.cnblogs.com/zempty/p/4298343.html

    展开全文
  • ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~关于如何让li中的解决方法:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 问题:  本人在写网页时,想要写一个侧边栏,又想要做成选项卡的样子,比如设置4个li,分别为:诗词,...
  • 如何让div中的ul水平居中 一般用有序列表ul>li作为网页中导航的布局元素,在做横向导航时,li标签设置了float:left;已经默认拥有行内块元素的特性,而ul标签还是块级元素。 给ul设置: display: inline-block; ...
  • div里面,ul中的li如何在浮动后可以居中显示的解决办法! 转自:https://www.cnblogs.com/zempty/p/4298343.html **博主这种方法可以不用给li标签添加 float: left;就可以li水平一排显示,但具体的原理没闹懂 <...
  • <ul ><li><img src="1.jpg" height="120" width="100"></img></li> </ul> height="120" width="100"这个是动态。 不想拉伸图片。宽高不固定
  • ul导航居中

    2015-07-14 18:55:00
    那么如何让li元素在ul中居中呢? 其实挺简单li设置成行内元素,然后给ul外层添加一个div,将ul包裹起来,给外层div添加text-align:center; 写了一个小demo <head><style>.test{text-...
  • 当做一个导航时候,用到DIV,可是当DIV宽度不设置时候,UL和LI如何居页面内显示 ... 默认它会直接在浏览器最左边,当DIV不设宽度时候,如何让UL居页面中间位置,这样再添加导航时候,可以往两边撑
  • 使用list-style-image设置了一个列表项小图标时,一直不能图标居中的显示。 解决办法是:使用ul li的backgrou-image(背景图片)来设置。 代码如下: ul li{ height:28px; line-height:28px; text-...
  • 如何令这个ul居中在网页,并且令每一个li水平并列显示呢?其实很简单,通过百度后学习到知识点,就在于运用:display:inline-block;属性。以前我们会通过float:left属性让li水平显示,其实还有别方法,就是用...
  • div容器内自适应宽度ul居中

    千次阅读 2013-03-11 22:27:32
    如何让不定宽度的UL相对父级DIV居中 ul居中在oprea和firefox中用margin:0 auto;和text-align:center;就可以轻松实现了,然而在IE确是居左显示,具体错误原因就有待高手去考证。 下面方法可以轻松实现...
  • 昨天做导航遇到一个问题:如何让ul中的li水平居中?  一般我们使用float,然后使用margin或者padding,通过距离让它们居中,但是如果你要做响应式就会发现这样的方法并不好用。我在网上看到大神的方法做了一点小的...
  • (注重:可能你经常会看到在IE5下定义在LI中的小图片会在文字下面,原因就是制作者把样式定义在A中了,IE5对内联元素补白样式支持不完善,所以在一般情况下把背景小图标定义在LI中,因为LI在默认的情况下是有块元素...
  • css遇到问题回顾

    2017-09-03 11:43:42
    子Div有内容,但是其父容器的高度却为0?怎样去掉li标签前的小黑点?div内部有ul,如何使div的高度随内部ul变化?...如何让span中的文字垂直居中?怎样让文本第一行缩进两汉字?如何让鼠标移动到a标签上时变成手的形
  • 1. 怎么div中的图片居中?2. 怎么div中的A标签居中?3. Ul标签内部加font会使样式显示不出来?给div加font对于内部ul不管用?4. Li标签写样式的时候,width,height用像素和百分比表示有什么区别?5. 如何使Ul的...
  • <ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions">Function</a></li></ul> 说起来Js核心是什么?那就是函数了。对于函数主要是理解它几个概念。 - 它可以...
  • css入门笔记

    2018-05-15 14:58:57
    ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性元素 ex:img,table 注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小...

空空如也

空空如也

1
收藏数 20
精华内容 8
关键字:

如何让ul中的li居中