ul li横排显示,100%,中间有border-right的做法

Windows防火墙服务异常修复指南:0x80070422与0x6D9报错实战处理 本文针对Windows防火墙服务异常导致的0x80070422与0x6D9报错,提供了从基础到进阶的实战修复指南。核心是通过services.msc服务管理器检查并修复Windows Firewall服务,包括设置启动类型、检查依赖服务等关键步骤。同时介绍了当基础方法失效时,如何使用命令行工具、系统文件检查器(SFC/DISM)以及排查组策略与第三方软件冲突等深度解决方案,帮助用户彻底解决防火墙服务无法启动或访问的问题。 阅读详情

做成的效果如下:


代码如下:

html:

<ul class="list2">
		<li>问卷</li>
		<li>结果</li>
	</ul>

css:

.index .list2{
	width: 100%;
	display: flex;
	flex-direction: row;
}

.index .list2>li{
	display:block;
	float: left;
	width: 50%;
	height: 20vh;
	line-height: 20vh;
	text-align: center;
	cursor: pointer;
}

.index .list2>li:nth-child(1){
	border-right: 1px solid #ddd; 
}
这里只要是用display:flex做了自适应。
OpenClaw 完整部署教程 版本:OpenClaw 2026.2.13更新日期:2026-02-26适用系统:Linux (Ubuntu/Debian/CentOS) 阅读详情

相关推荐

【流复制环境PostgreSQL-14.1到PostgreSQL-16.1大版本升级】

PostgreSQL大版本会定期添加新特性,这些新特性通常会改变系统表的布局,但内部数据存储格式很少改变。pg_upgrade通过创建新的系统表和重用旧的用户数据文件来执行快速升级。pg_upgrade升级主要有三种用法:1、使用pg_upgrade拷贝升级。2、使用pg_upgrade链接升级(带有- -link选项),- -link较快,但是启动新版本后修改了数据文件,再启动旧版本可能数据损坏,回滚较麻烦,所以尽量避免使用link参数进行升级。

小怪兽的博客 2926

html全屏显示auto100%,css中width、height中auto与100%的区分

(1)width、height使用固定值是一定会显示的,但是除非是小型项目或是特殊情况,最好不要使用固定值。不利于响应式开发,当从移动端看页面就会非常不美观。(2)不设置width、height时默认为auto,当position不同时显示效果不同,浮动可能会导致其不显示,需要清除浮动。width:auto表示宽度是可变动的,这个div的所有部分(content+margin+padding+bo...

weixin_34163588的博客 716

一种解决STM32多串口同时收发的方法

在做项目中,遇到了同时调用串口通信时程序崩溃的问题,在项目中,串口1用作调试串口,串口2用作MQTT通信串口,串口3用作下位机通信串口, 串口1重定向以后,用库函数自带的printf函数打印字符串 串口2使用自己写的u2_printf函数,即va_list这套变参宏定义后使用vsprintf函数打印字符串 串口3刚开始使用串口2一样的打印方式,程序在调试调用到串口3打印函数时直接崩溃,后续将串口3改用dma转存输出,仍然无法正常调用 多次研究以后,采用三个串口都使用重定向后的库函数自带的printf

Zxp0605的博客 8797

CSS3中li元素自动横向排列、多栏div自动横向排列的简单方法

在传统的的css中,要想实现li元素横向排列,需要用到float属性,如果使用不熟练往往引起布局的错乱。css3中提供了一种非常好的实现机制。li元素的宽度、换行等都可自动完成,并根据窗口尺寸自动调整,呈现出一定程度的响应式布局。在Chrome,Edge,IE11中显示结果都一样。 而多栏div自动横向排列的方法与上面的相似。完整代码<!DOCTYPE html> <html> <head

2万+

从零开始:用LabVIEW和ModbusTCP协议,像搭积木一样连接Delta PLC

本文详细介绍了如何利用LabVIEW的图形化编程环境和ModbusTCP工业协议,快速连接Delta PLC实现数据通信。通过模块化配置和实战案例,指导读者无需编写复杂代码即可完成寄存器读取、多数据类型处理及系统监控,显著提升工业自动化项目的开发效率与部署速度。

n8m7b6v5c4的博客 697

matlab电子科技大学数学实验期末模拟35道(1)

【代码】matlab电子科技大学数学实验期末模拟35道。

c_wrj_的博客 2044

HTMl:标签li如何横向排列

今天分享下”HTMl:标签li如何横向排列“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 大部分的导航栏全是横向排列如下图所示,那麼这到底是怎么完成的呢?实际上它主要是应用标识中li的横向排列,下边以一个事例向我们具体解读实际是怎样完成的。 1编写横向菜单的HTML代码架构 ​​<​​​​ul​​ ​​id​​​​=​​​​"menu"​​​​>​​ ​​<​​​​li​​​​><​

yunduanaoligei的博客 6713

CKS-CN考试之路----04

根据上面信息我们知道,这个pod运行在default命名空间下,pod名字为cpu-77cd5ddcbf-bvb8w。可以从/etc/falco/falco_rules.yaml中获得相关内容,大概在文件的460行左右.编辑/etc/falco/falco_rules.local.yaml。7c688a8bfd69即是我们想要获得的docker id。将行为不当 Pod 的 Deployment 缩放为零副本。根据我们刚才定义的rule生成报告。访问/dev/mem 的 Pod。那么如果考试记不住怎么办?

Q先生 603

HTML标签<ul> <li> <ol> 等

无序列表标签: The &amp;amp;lt;ul&amp;amp;gt; element is used to define an unordered list of items. Use an unordered list to contain &amp;amp;lt;li&amp;amp;gt; elements that do not need to be presented in numerical order and can be rearran...

学习笔记 1155

骚戴笔记公告

骚戴笔记公告

我从不打没有准备的仗! 2万+

Vue3 - H5实现省市区三四级联动组件,选择地址自定义省市区三级联动插件,弹框式多级联动选择器区域选择,vue3实现省市区三级联动地址选择组件(支持接口数据懒加载,样式精美漂亮,附带详细示例源码)

vue3实现省市区三级联动地址选择组件(附address文件),vue3实现省市区三级联动, 实现省、市、县地区三级联动功能,vue3省市区选择器,VUE3 h5如何实现省市区街道的四级联动选择,vue实现省市区选择联动,vue3城市三级联动(自定义组件)_VUE三级联动,插件省市区联动,vue如何实现省市区选择器,vue3怎样实现省市区地址三级联动,vue四级联动,vue3级联选择器,vue3实现选择省市区镇(街道)四级级联选择,包含三级级联选择,省市区街道三级四级联动选择器,VUE3自定义多列选择器省市

🏆 前端领域优质创作者 3070

运用ul和li实现树形展示

树形列表             .ulProd > ul{                        margin-bottom: 0px;         }         .ulProd ul > li {             list-style-type:none;             margin:0;             padding:10p

Sid的专栏 8021

SAP 固定资产采购简介

SAP 固定资产采购是指企业通过采购流程获取长期使用并记录为固定资产的物品。固定资产是企业为长期使用而购置的资产,如机器设备、办公设备、建筑物、车辆等,通常这些资产的使用期限较长,并且在资产负债表上记录。在SAP系统中,固定资产采购流程通常与物料管理(MM)模块和固定资产管理(FI-AA)模块相结合。这个过程涉及从需求的提出、采购订单的创建,到货物接收、发票校验和资产激活的多个步骤。

我小时候很黑的博客 1731

CSS的基础认识2

边框:border:; border:1px solid #f00; 复合式写法 border-width : ; 边框的宽度 可有可无,会有默认的宽度显示 border-style:; 边框的线型 必须要有的 线型有很多种,常用的有:none 无边框(取消边框) solid 实线 dashed虚线 dotted 点...

qq_46278971的博客 224

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

ul的宽度根据li的宽度自适应

在项目中遇到ul中的li数量不定,但是还要给ul设置圆角和阴影,而ul默认的宽度是100%,上网查到一个简单的方法就是在ul中加属性 ul{ width: -moz-fit-content; width: fit-content; } 如果对浏览器要求不高,这种方法就可以实现了,但是我们公司要求的是市场上各大浏览器的极速模式,兼容模式以及ie8都要兼容,我测试了一下上面的方法...

笑到世界都狼狈的博客 7688

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

使li标签横向排列的三种方式

一、display:inline 通过把li转换为行内元素实现,行内元素不独占一行,根据内容撑开大小 二、float:left 通过让li浮动实现横向排列,浮动会使li脱离文本流,且不占位置 三。通过flex布局实现 首先给父级定义flex,li{ flex:1}的意思为独占父级宽度的n分之1,这里的n取决于li的个数,也就是4分之1 ...

m0_61685348的博客 3万+

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

图文详解如何让ul中的li元素横向排列(附代码)

在页面布局时,我们经常会用到li标签,因为li标签用途很广泛,它可以用来制作列表,选项卡,导航等等。但是<ul>标签里的li默认情况下是纵向排列的,那我们可不可以让li横向排列呢?这篇文章就给大家介绍两种方法,来实现HTML中ul列表横向排列。有需要的朋友可以参考一下,希望对你有用。 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新) ul列表的横向排列在导航中用得比较多,接下来就通过横向导航实例来讲讲如何用CSS让ul横向排列。 注意: 1、li

lin123_00的博客 3万+

li标签的横向排列

       li标签的使用很广泛,在各种选项卡的制作,导航栏等都用到,那么li标签的横向排列也是经常用到。&lt;ul&gt;标签下的项目&lt;li&gt;默认是纵向排列的,我们需要定义额外的CSS属性让其横向排列,li标签的横向排列有两种实现方法,现总结如下:1、使用float:left      在这里顺便解释几个css样式的使用。       1)list-style:none,这个属性...

Wendy 7万+

html ul纵向不换行,ul li列表并排 不换行css布局

如何使用CSS样式让ul li列表标签布局并排显示不换行篇默认ul li布局竖列显示这里CSS5介绍使用两种使用css样式让li标签布局并排显示,一种使用css display,另外一种使用css float浮动。一、使用display让li并排显示CSS样式单词:display:inline1、不换行横向并排CSS代码:li{ display:inline}2、HTML代码片段:CSS5CSS制...

weixin_34377037的博客 6770

ul li横向排列php,如何让ul实现横向排列不换行的效果

大家在页面布局时有没有遇到这种情况,让ul横向排列时,它会换行,但是这不是我们希望看到的效果,你知道怎么处理这种情况吗?这篇文章就和大家聊聊如何让ul实现横向排列不换行,感兴趣的欢迎阅读评论。刚学前端不久,尝试着写各种布局。今天想实现一个横向排列的照片列表,于是最先想到的就是利用ul将list-style设置为none。但是这样只是仅仅将ul默认为横向排列,并没有限制ul一定不换行。当ul设置的宽...

weixin_29871753的博客 6071

用ul li做横向导航

样式--------------------------------- /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */...

weixin_30363981的博客 508

ul li横向排列

ul和li都是块级元素,所以使用ul li时,都是分行显示 块级元素可以通过设置float来使他们在同一行显示, 1 2 3 出来的结果如: 通过设置 li{float:left} 就可以是ul显示在同一行了 但是还是显示了点点,去掉此点点,可以加 ul{list-style:none;} li前面的圆点不见了

u014773932的博客 4849

HTMl中<ul>标签中li横向排列

  大多数的导航栏都是横向排列如下图所示,那么这究竟是怎么实现的呢?其实它主要运用&lt;ul&gt;标签中li的横向排列,下面以一个例子向大家详细讲解具体是如何实现的。 1编写横向菜单的HTML代码架构 &lt;ul id="menu"&gt; &lt;li&gt;&lt;a href="http://www.baidu.com"&gt;Baidu.Com&lt;/a&gt;

weixin_40133326的博客 4万+

ul中的li横排问题

ul中的li横排距中问题 ul中的li横排相信大家都能做到,但是如果li不设宽度,不加浮动,还必须水平距中,相信就有点难度了吧。 li都不设宽度,如何让ul中的li横排距中显示呢? 关键就在块的显示方式 li默认是块级元素,此元素前后会带有换行符,所以每个li都会换行,通常我们为了让li横排都会加浮动 现在我们把浮动去掉,每个li都会换行,如何让li横排呢?玄机就在display。 让

swallowliyan的专栏 2182

HTML中的<UL>标签中li横向排列

第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 &lt;ul id="menu"&gt;  &lt;li&gt;&lt;a href="http://www.baidu.com"&gt;Baidu.Com&lt;/a&gt;&lt;/li&gt;  &lt;li&gt;&lt;a href="http://www

H265技术专栏 9366

让li 横排显示的CSS代码

方法一:直接在里面加样式来实现横排字体横排字体 点评:此种方法简单易操作,如果是写在模板中循环的话,会造成代码大量重复。方法二:通过定义ul li 来实现ul{list-style-type:none; margin:0;width:100%; }ul li{ width:80p

蜗牛天堂 3万+
上一篇: 500 (Internal Server Error)
下一篇: 实习两周总结
spfLinux
博客等级 码龄10年 117粉丝 307原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值