奇数个元素均分宽度

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量75 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/liu-sheng/p/9581736.html
版权

刚开始实习，从改页面代码开始做起，以前学的前端知识也就只记得一些基础了，实践的内容都忘了。最近修改一个页面，需要将三个li均匀分布在同一排，折腾了好一会，然后看见别人博客的用法学会处理，在这里记下来。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
    <title>标题</title>
	<style>
		#aa{
		  display:flex;
		  width:100%;
		  height:10rem;
		}
		.bb{
		  flex:1;
		  text-align:center;
		}
	</style>
</head>
<body>
	<div style="width:100%;background-color:grey;">
		<ul id="aa">
			<li class="bb">第一个</li>
			<li class="bb">第二个</li>
			<li class="bb">第三个</li>
		</ul>
	</div>
</body>

　　使用的是css3的一个flax属性，父级元素用display：flex；布局，子集元素用flex：1；均分父级元素。

 

转载于:https://www.cnblogs.com/liu-sheng/p/9581736.html

weixin_30297281
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹性布局如何设置最后一个元素的位置
BradenHan的专栏
06-12 860
在弹性布局（Flexbox）中，调整最后一个元素的位置可以通过几种方式实现，具体取决于你希望达到的布局效果。
三个元素平均分配宽度
tinyint_813的博客
09-01 383
采用flex布局 把三个子元素都写上 flex:1 就会平分
CSS3 实现根据ul中li的个数设置li的宽度
hudeyong926的专栏
09-27 1901
在项目中遇到ul中的li数量不定，但是还要给ul设置圆角和阴影，而ul默认的宽度是100%,上网查到一个简单的方法就是在ul中加属性 ul{ width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto; } li{float:left} 如果对浏览器要求不高，这种方法就可以实现了 first-child first-child表示选择列表中的第一个标签 nth-..
HTML标签元素单词释义及知识点总结
weixin_46318642的博客
05-01 1372
HTML标签元素单词释义及知识点总结 一.说明 该内容为本人自学HTML所记笔记，如有不准确的地方欢迎各位品评指正，希望对需要的人有所帮助，谢谢。 二.基本标签 块级元素：div；p；dl；form；h1～h6；ol；ul 行内元素：a；b；i；em；img；span (pre是块级元素但只能包含文本或行内元素) 三.css样式和选择器 选择器 空格 后代选择器 .main...
CSS IE6奇数宽度或高度的bug
09-25
IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div
数据结构与算法c++实现 改变顺序表的元素次序，第奇数个元素移到前面，第偶数个元素移到后面
06-04
数据结构与算法 c++实现 改变顺序表的元素次序，第奇数个元素移到前面，第偶数个元素移到后面 可直接运行 代码有批注 适合大二初学数据结构与算法
统计奇数个数.cpp
10-28
统计奇数个数.cpp
Python 判断奇数偶数的方法
09-19
假设我们需要判断一个列表中的所有元素是否为奇数或偶数，可以使用列表推导式来简化代码： ```python numbers = [1, 2, 3, 4, 5, 6] results = ["{0} 是偶数".format(n) if n % 2 == 0 else "{0} 是奇数".format(n)...
奇数次分频器
12-09
module count(out,clk,clr);parameter N=5;output out; input clk,clr;reg out1,out2;reg [N/2:0] count1,count2;always @(posedge clk or posedge clr ) if(clr) begin count1=0; out1=0; end else begin count1 = ...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 581
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1047
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 279
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 601
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 181
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 452
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 576
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 998
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
c语言数列奇数位置元素右移
09-07
2. 使用循环遍历数组的奇数位置元素，从第3个元素开始（奇数位置从1开始计数）。 3. 将当前奇数位置元素赋值给一个临时变量tmp，用于备份。 4. 将当前奇数位置元素的值更新为它前一个位置的元素的值。 5. 将tmp变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值