给li标签中的span设置属性margin-bottom不生效

今天药忘吃喽~ 2022-06-06 03:27 675阅读 0赞

给li标签中的span设置属性margin-bottom不生效

**html如下：**

<ul class="lottery_main"">
                
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>  
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>  
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
                  <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>  
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>  
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
                  <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>  
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li> 
                <li class='li25'>
                    <span class="lottery_name25">飘飘飘</span>
                </li>
       </ul>

**css如下：**

.lottery_main {
        position: relative;
        width: 100%;
        display:none;
        text-align:center;
    }
    
    .lottery_main li{
        margin: 0;
        padding: 0;
        width: 19%;
        display: inline-block; 
    
    }
    
    
    .lottery_name25{
        font-size: 17px;
        margin-left: 13px;
        margin-bottom: 17px;
    }

显示的效果如下：

![Center][]  
给span设置的margin-bottom没有生效

如果给.lottery  li添加属性height，即：

.lottery_main li{
        margin: 0;
        padding: 0;
        width: 19%;
        display: inline-block;
       height:52px; 
    }

显示效果如下：

![Center 1][]

总结：在li标签里面包含span标签，如果要给span设置margin-bottom属性，那么要同时设置li的display:block(display:inline-block)和height属性，那么给span设置的margin-bottom才生效。

[Center]: /images/20220606/b79321df44a44134b1a6c795ccc08ba5.png
[Center 1]: /images/20220606/3e34b0a0c05f45cda5e1987dfff64a98.png

发表评论取消回复

表情：

评论列表（有 0 条评论，675人围观）

还没有评论，来说两句吧...

相关阅读

相关 mybatis pagehelper手动设置pages属性不生效

环境: springboot+mybatis, 其中使用了pagehelp插件依赖如下: <dependency> <group

浅浅的花香味﹌/ 2023年07月03日 07:25/ 0 赞/ 1 阅读

相关【CSS】span标签设置宽度

前言我们都知道HTML中的span标签是行内标签，行内标签是无法设置高度和宽度的，但是就是需要给span设置宽度，应该怎么处理呢？ display 首先

朴灿烈づ我的快乐病毒、/ 2023年06月18日 04:58/ 0 赞/ 9 阅读

相关 span标签无法设置宽度问题

开发的时候，发现对`span`标签设置宽度没有效果，这是因为，对象是inline对象时，width属性会被忽略。需要在span的css中增加display属性，将span设置为

末蓝、/ 2022年12月08日 05:20/ 0 赞/ 314 阅读

相关 jQuery点击li标签改变颜色，其他li标签不变

<!DOCTYPE html> <html> <head> <title></title> <script src="jquery-3.2.0.min.js"></sc

Myth丶恋晨/ 2022年06月14日 09:36/ 0 赞/ 333 阅读

相关 li中的span设置float:right不生效

li中的span设置float:right不生效：部分html代码如下： <li> <span id='one'></span>

Myth丶恋晨/ 2022年06月07日 06:47/ 0 赞/ 225 阅读

相关给img标签动态设置src属性，不生效

给img标签动态设置src属性，不生效 js如下： for(var i = 0; i<len;i++){ var data = datas[i];

亦凉/ 2022年06月06日 03:41/ 0 赞/ 1194 阅读

相关给li标签中的span设置属性margin-bottom不生效

给li标签中的span设置属性margin-bottom不生效 html如下： <ul class="lottery_main"">

今天药忘吃喽~/ 2022年06月06日 03:27/ 0 赞/ 676 阅读

相关 radio设置属性checked属性不生效

在jquery中，通过点击事件设置radio的checked属性不生效。 1、html <div id="weChatSignIn">

「爱情、让人受尽委屈。」/ 2022年06月04日 03:16/ 0 赞/ 448 阅读

相关 input 属性radio中设置checked 不生效

同一个页面中有许多地方都用到了单选按钮并设置了默认选中 , 结果在运行的时候发现单选按钮没有被默认选中由于是复制然后修改个别属性 ,然后直接使用的 , 所以name值忘记修

妖狐艹你老母/ 2022年06月01日 08:18/ 0 赞/ 186 阅读

相关 jquery给p标签、span标签等双标签赋值

html中有许多双标签如 <p></p> <span></span> <li></li>标签等 -------------------- 拿span标签举个栗子 j

ゞ浴缸里的玫瑰/ 2022年03月06日 18:00/ 0 赞/ 331 阅读