热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Flexbox-容器宽度自动

如何解决《Flexbox-容器宽度自动》经验,请问有什么解决方案?

如何使 ulin的 .menu-sub-col宽度等于内容宽度?

https://fiddle.jshell.net/j9ujfL2n/3/

.menu {
  position: absolute;
  z-index: 90;
  display: flex;
  flex-direction: row;
  top: 40px;
  left: 0;
  transition: transform 0.25s ease-in-out;
  transform: translateY(-100%);
  visibility: hidden;
}
.menu--visible {
  transform: translateY(0);
  visibility: visible;
}
.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu li {
  cursor: pointer;
}

.menu-main {
  background-color: #3E5AE2;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  height: max-content;
}
.menu-main li {
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.menu-main li:hover {
  color: #fff;
}
.menu-main li.active {
  background-color: #4B67E8;
  color: #fff;
}
.menu-main li.active:after {
  content: '';
  position: absolute;
  right: -8px;
  top: calc(50% - 8px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #4B67E8;
  clear: both;
}
.menu-main li i {
  margin-right: 15px;
}

.menu-sub:not(:empty) {
  padding: 20px 30px;
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.menu-sub-col {
  padding-right: 25px;
}
.menu-sub-col:not(:last-child) {
  border-right: 1px solid #eeeeee;
  margin-right: 25px;
}
.menu-sub-col h4 {
  color: #bdbdbd;
  font-size: 12px;
  text-transform: uppercase;
}
.menu-sub-col ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  max-height: 180px;
}
.menu-sub-col li {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 4px;
  padding-left: 0;
  opacity: 0.75;
}
.menu-sub-col li:hover {
  color: #ffffff;
  opacity: 1;
  background: #4b67e9;
  box-shadow: -10px 0px 0px #4b66ea, 10px 0px 0px #4b66ea;
  transition: box-shadow 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  border-radius: 3px;
}
.menu-sub-col li i {
  margin-right: 8px;
}


推荐阅读
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • 本文介绍了一种解析GRE报文长度的方法,通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]
  • position属性absolute与relative的区别和用法详解
    本文详细解读了CSS中的position属性absolute和relative的区别和用法。通过解释绝对定位和相对定位的含义,以及配合TOP、RIGHT、BOTTOM、LEFT进行定位的方式,说明了它们的特性和能够实现的效果。同时指出了在网页居中时使用Absolute可能会出错的原因,即以浏览器左上角为原始点进行定位,不会随着分辨率的变化而变化位置。最后总结了一些使用这两个属性的技巧。 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 本文介绍了Oracle存储过程的基本语法和写法示例,同时还介绍了已命名的系统异常的产生原因。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 本文讨论了如何使用GStreamer来删除H264格式视频文件中的中间部分,而不需要进行重编码。作者提出了使用gst_element_seek(...)函数来实现这个目标的思路,并提到遇到了一个解决不了的BUG。文章还列举了8个解决方案,希望能够得到更好的思路。 ... [详细]
  • 本文介绍了如何使用n3-charts绘制以日期为x轴的数据,并提供了相应的代码示例。通过设置x轴的类型为日期,可以实现对日期数据的正确显示和处理。同时,还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习,读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]
  • 本文介绍了Foundation框架中一些常用的结构体和类,包括表示范围作用的NSRange结构体的创建方式,处理几何图形的数据类型NSPoint和NSSize,以及由点和大小复合而成的矩形数据类型NSRect。同时还介绍了创建这些数据类型的方法,以及字符串类NSString的使用方法。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 本文介绍了如何在给定的有序字符序列中插入新字符,并保持序列的有序性。通过示例代码演示了插入过程,以及插入后的字符序列。 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了在使用Laravel和sqlsrv连接到SQL Server 2016时,如何在插入查询中使用输出子句,并返回所需的值。同时讨论了使用CreatedOn字段返回最近创建的行的解决方法以及使用Eloquent模型创建后,值正确插入数据库但没有返回uniqueidentifier字段的问题。最后给出了一个示例代码。 ... [详细]
author-avatar
hyl7758521_948
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有