关于flex的list-style 问题

最新推荐文章于 2023-07-20 13:26:04 发布
最新推荐文章于 2023-07-20 13:26:04 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37996815/article/details/79888766
版权

前面在使用li设为flex发现，设置这个属性之后我的li的list-style属性失效了，

发现是list-style这个属性的问题；

首先这个list-style作用的基础是元素的display属性值基于display:list-item的基础上的

display:list-item会让元素以列表块元素的形式存在，之后我们蔡可以设置list-style,现在我们将display:flex设为这个，所以就覆盖了display:list-item,以至于我们的list-style失效了。

解决方式1  给li的子元素分别设置float

解决方式2  在li里面在套一个div 对div使用flex

感谢  

qq_37996815
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex 皮肤样式css+style
09-15
在编写这类文件时，开发者通常会定义一系列的类，如`.button`, `.label`, `.list`等，分别对应Flex中的Button、Label和List等组件。然后，这些类将被应用到Flex组件实例上，以改变其默认样式。 而"kingnarestyle....
lista-de-tarefas:HTML，CSS，Usle Flex-box + Uso da Linguagem Java脚本列表
04-02
CSS（Cascading Style Sheets）则用于美化和布局这些HTML元素。通过CSS，我们可以控制任务列表的颜色、字体、间距、排列方式等视觉效果。比如，使用Flexbox可以帮助我们轻松实现列表项的水平或垂直布局，以及在不同...
Flex中 style 样式使用基本说明
俊哥
09-14 1278
样式的定义方式 1. 外部样式表 Flex会调用全局样式表global.css，该全局样式表由flex-config.xml定义， 如：/WEB-INF/flex/global.css 系统默认的样式表文件global.css文件其实没有任何样式定义，我们可以手动添加全
魔法CSS（1）——消失的list-style
weixin_34366546的博客
11-10 286
有时候一个简单Bug的出现，往往是由于一点知识小细节；但往往这点小细节看似简单，其背后却颇有韵味。 （需求）这部分UI给换成这样的 看起来相对比较简单，分析下结构： 整体为无序列表，需要保留前置图标； 每个列表后跟随对号，且始终垂直居中； 嗯？首先需要个对号，Css好像可以实现（那就用不用麻烦用icon了）： 对好实现 //...
li设置了弹性盒子 他的list-style属性失效了
最新发布
weixin_51097961的博客
07-20 307
list-style作用的基础是元素的display属性值基于display:list-item的基础上的，display:list-item会让元素以列表块元素的形式存在，之后我们才可以设置list-style,现在我们将display:flex设为这个，所以就覆盖了display:list-item,以至于我们的list-style失效了。在li里面在套一个div 对div使用flex。给li的子元素分别设置float。
Flex元数据标签之[Style]
give me five
08-31 1927
Flex中引入了元数据标签的概念，这些标签并没有被编译到SWF文件中，而只是告诉编译器如何生成SWF 文件。 [Style]  Style元数据标签用来为组件定义自定义样式属性。[Style]标签要插入到ActionScript类定义之前，或MXML文件中的块内。
flex
qq_35327397的博客
03-11 149
ul { width: 300px; height: 400px; background: #f0f0f0; list-style: none; display: flex; flex-direction: ...
todo-list
03-14
例如，可以使用`display: flex`或`grid`来创建一个响应式的布局，使得Todo-list在不同设备上都能良好展示。`flexbox`允许我们在一行或一列中灵活地布置元素，而`grid`则更适合于二维布局，可以方便地创建行和列。 ...
react-native-refreshlist
05-07
method doRefresh:刷新加载方法 doLoadingMore:上拉加载...RefreshListView style={{flex:1}} dataSource={this.state.dataSource} renderRow={this.createRow} doRefresh={this.handleRefresh} inNavigator={fal
Flex组件:Style的使用
ritlv97d
06-30 509
Flex组件:Style的使用 2010年11月01日 　　 由于样式章节的内容比较琐碎，也没有比较难的部分，用例子不好演示，就把在 flex 中应用样式相关的文字总结都放进了演示里面，左边的树形文档中列出了样式的各种使用方法，点击相应的树节点，右边就会把对应的文字内容显示出来。 　　实际的应用效果在 ViewStack 控件的各个子窗口中给出，可以更改里面的设置内容来查看不同的效...
《ReactNative系列讲义》基础篇---05.Style and Flex
fsf_snail的专栏
08-28 444
| 版权声明：本文为博主原创文章，未经博主允许不得转载。 一、简介 每一个核心组件都自带一个style属性，用来添加组件的样式，比如字体大小、颜色、排列方式，组件的布局方式、位置等等。下面让我们一起来学习一下style样式的基本用法。 二、基础知识 style属性名称和CSS一样，只不过命名规则使用驼峰法。 style属性最简单的方式是JavaScript对象类型，也可写成数组类型；...
Flex样式工作原理
xygg0801的博客
11-24 385
系统启动初始化桌面 Flex 在 framework.swc 文件中包括了一个全局样式表 (default.css) 。这个文件包含全局样式类选择器的定义，以及大多数Flex 组件的类型选择器。 Defaults.css文件定义了flex组件的默认样式，这里的每一个css选择符(selector)就对应下面的一个类。 Flex编译器编译时会生成很多 有[Mixin]元标签的类，其
CSS 弹性布局 flex 属性详解
禅与计算机程序设计艺术
12-08 8682
flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。 1、flex-grow 定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如 <div class="wrap"> <div class="div...
list之flex布局写法及禁止橡皮筋效果
weixin_30522095的博客
01-09 177
list之flex布局写法 移动端实际场景中经常会遇到将header置顶，然后下面list需要滚动的情况，通常的做法会是将header使用fixed的方式固定到顶部，然后list主体相对于header的位置设置marginTop或者position的定位，这样的话做起来感觉有点别扭，也不贴合移动端的布局，而且position:fixed定位会在IOS8以下发生抖动现象，所以使用flex布局最佳。 ...
如何使用Flex List
wxmfly
07-02 342
如何使用Flex List , list 提供了鼠标上移，选中时高亮显示。 [code="xml"] ...
Flex DataGrid组件
06-17 670
实际上，DataGrid组件是属于列表组件的，之所以单独拿出来讲解，主要是因为DataGrid组件有着很强大的功能，也有很多扩展的应用是在开发中经常用到的。DataGrid组件是按照行和列的形式显示数据的。有几个类是只有DataGrid组件才能使用的，包括DataGridCellEditor类、DataGridColumn类和HeaderRenderer类。这三个类会在使用的时候逐
Flex样式-List篇
牛栏山矿泉水
12-31 169
List { backgroundAlpha: 0.61; backgroundColor: #000000; alternatingItemColors: #cc0000, #ccff00; useRollOver: true; rollOverColor: #ffcc00; textRollOverColor: #ffcc66; borderStyle...
flex List使用2
yesjava的专栏
04-20 486
http://www.adobe.com/2006/mxml" width="450" height="220">         import mx.controls.Alert;    import mx.collections.ArrayCollection;    [Bindable]public var titleName:String;//标题    [Bindable]p
這是css什麽選擇器#menu { background-color: #23262e; color: #fff; display: flex; flex-direction: row; list-style-type: none; margin: 0; padding: 0; width: 100%; border-left: 100px solid #23262e; /* 添加边框 */ }
06-08
这是一个 ID 选择器，选择 ID 为 "menu" 的 HTML 元素，并且给它设置了一些样式属性，包括背景颜色、文字颜色、弹性盒子属性、列表样式等等。其中，border-left 属性添加了一个左边框，宽度为 100 像素，颜色与背景颜色相同。注意，这段 CSS 代码只对 ID 为 "menu" 的元素有效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值