码迷,mamicode.com
首页 > Web开发 > 详细

css实现父级元素根据子集元素内容自适应宽度

时间:2020-07-27 13:55:28      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:ima   image   mamicode   over   style   col   nowrap   play   line   

实现效果:

技术图片

 

 

代码:

               <ul class="sub">
                                <li>
                                    <a href="">新闻摘要新闻摘要新闻摘要新闻摘要新闻摘要</a>
                                    <a href="">新闻摘要</a>
                                    <a href="">新闻摘要</a>
                                    <a href="">新闻摘要</a>
                                    <a href="">新闻摘要</a>
                                    <a href="">新闻摘要</a>
                                    <a href="">新闻摘要</a>
                                    <a href="">新闻摘要</a>
                                    <a href="">新闻要新闻摘要摘要</a>
                                </li>
                            </ul>

 

 li{
              display: block;
              a{
                text-align: center;
                // width: 98px;
                height:35px; 
                line-height:35px;
                color: #333;
                display: table;
                white-space: nowrap;
                &:hover {
                  color: #ff0000;
                }
              }
            }

   父级元素:

 display: block;


子集元素:
white-space: nowrap;禁止换行
display: table;

css实现父级元素根据子集元素内容自适应宽度

标签:ima   image   mamicode   over   style   col   nowrap   play   line   

原文地址:https://www.cnblogs.com/wangyuxue/p/13384181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!