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

显示的效果如下：

给span设置的margin-bottom没有生效

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

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

}

显示效果如下：

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

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

js中获取当前点击的li标签以及li标签中a标签的id
可以使用以下代码来获取当前点击的li标签的id: document.querySelectorAll('li').forEach(function(li) {li.addEventListener(' ...
vue3中body有默认属性margin:8px如何去掉?
vue3中body有默认属性margin:8px如何去掉? 直接找到vue项目根目录下自动生成的index.html文件,在下面添加下面的代码,就可以解决. 需要添加的代码 <style> ...
在html中设置外边距,CSS外边距设置属性margin用法
本文向大家描述一下CSS外边距属性margin的用法,设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位.百分数值甚至负值,相信本文介绍一定会让你有所收获. CSS外边距围绕 ...
style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...
li标签的点怎么设置_固定资产管理系统的标签，你知道怎么设置吗？
固定资产管理系统是企业管理中一个重要的组成部分,固定资产具有价值高,使用周期长.使用地点分散.管理难度大等特点.现在市场上的固定资产管理系统大多以借助条形码技术,对固定资产进行标识,实现对固定资产日常 ...
关于jsp页面中的pageEncoding和contentType以及html中的meta标签中字符集的设置（转）...
转载:<关于JSP页面中的pageEncoding和contentType两种属性的区别> pageEncoding是jsp文件本身的编码 contentType的charset是指服务器 ...
a 标签中 rel=“noopener noreferrer“属性的含义和功能
a标签:网页超链接中隐藏的钓鱼攻击先看一条代码: <a href="" rel="noopener noreferrer" >跳转到2页</ ...
让 li 标签中的 a 标签内容铺满
html部分代码 <ul><li><a herf="">文字符号</a></li><li><img s ...
php正则获取li,用正则表达式抓取网页中的ul 和 li标签中最终的值！
获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1"; ...

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

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

最新文章

热门文章