JS:让2个li标签排列在同一行

前言

在js中,ul元素中li标签是块级元素,现在需要让2个分行的li元素显示在同一行,并且去掉li元素自带的标记符号

  • li元素处理前的样式如下:

在这里插入图片描述

实现

  • html代码
<div><ul><li>数据1</li><li>88679</li></ul>
</div>
  • 样式代码:
<style>/* 去掉列表前面的标记符号 */li {list-style: none;}/* 第一个元素 */ul li:first-child {color: black;font-size: 18px;display: inline-block;margin-top: 10px;text-align: center;}/*第二个元素 */ul li:last-child {color: #FF9912;font-size: 20px;display: inline-block;margin-left: 5px;margin-top: 10px}
</style>
  • 核心:
    在这里插入图片描述

  • 结果如下:
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213962.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十六届山东省职业院校技能大赛中职组网络安全赛项竞赛正式试题

第十六届山东省职业院校技能大赛中职组网络安全"赛项竞赛试题 一、竞赛时间 总计&#xff1a;360分钟 二、竞赛阶段 竞赛阶段任务阶段竞赛任务竞赛时间分值A、B模块A-1登录安全加固180分钟200分A-2本地安全策略设置A-3流量完整性保护A-4事件监控A-5服务加固A-6防火墙策…

人机交互——自然语言理解

人机交互中的自然语言理解是人机交互的核心&#xff0c;它是指用自然语言&#xff08;例如中文、英文等&#xff09;进行交流&#xff0c;使计算机能理解和运用人类社会的自然语言&#xff0c;实现人机之间的自然语言通信。 自然语言理解在人工智能领域中有着非常重要的地位&a…

系统报错;由于找不到hid.dll,无法继续执行代码”的解决方案分享

在计算机使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“找不到hid.dll&#xff0c;无法继续执行代码”。这个错误提示通常表示计算机缺少了一个重要的动态链接库文件&#xff0c;即hid.dll。本文将详细介绍hid.dll丢失对电脑的影响以及hid.dll是…

【Python网络爬虫入门教程2】成为“Spider Man”的第二课:观察目标网站、代码编写

Python 网络爬虫入门&#xff1a;Spider man的第二课 写在最前面观察目标网站代码编写 第二课总结 写在最前面 有位粉丝希望学习网络爬虫的实战技巧&#xff0c;想尝试搭建自己的爬虫环境&#xff0c;从网上抓取数据。 前面有写一篇博客分享&#xff0c;但是内容感觉太浅显了…

vite脚手架,配置动态生成路由,添加不同的layout以及meta配置

实现效果&#xff0c;配置了layout和对应的路由的meta 我想每个模块添加对应的layout&#xff0c;下边演示一层layout及对应的路由 约束规则&#xff1a; 每个模块下&#xff0c;添加对应的 layout.vue 文件 每个文件夹下的 index.vue 是要渲染的页面路由 每个渲染的页面路由对…

Appium python自动化测试系列之移动自动化测试!

1.1 移动自动化测试现状 因为软件行业越来越发达&#xff0c;用户的接受度也在不断提高&#xff0c;所以对软件质量的要求也随之提高&#xff0c;当然这个也要分行业&#xff0c;但这个还是包含了大部分。因为成本、质量的变化现在对自动化测试的重视度越来越高&#xff0c;在…

CTF-misc(1)图片隐写

笔记目录 渗透测试工具(1)wireshark渗透测试工具(2)Nmap渗透测试工具(3)BurpsuiteAWD比赛(1)AWD入门攻略大纲CTF-Web(2)SQL注入CTF-Web(3)文件上传漏洞 图片隐写目录 (1)GIf和二维码隐写 二维码补全 二维码绘图 Gif规律分析 (2)文本附加图片隐写 (3)IHDR文件头修复图片宽高 (…

⭐Unity 搭建UDP服务端(02)接收客户端消息

客户端在上一篇 由于服务器逻辑写的较为简单 所以直接上代码了~ using System; using System.Net; using System.Net.Sockets; using System.Text; using UnityEngine;public class UdpServer : MonoBehaviour {public static UdpServer instance;private void Awake(){if (…

Springboot管理系统数据权限过滤——ruoyi实现方案

本文主要简述&#xff0c;Ruoyi框架使用的权限过滤实现方案&#xff0c;实现简单易懂。主要知识点有&#xff1a; 注解定义&#xff1b;面向切面编程&#xff0c;在执行有数据权限注解的方法之前获取用户组织权限&#xff0c;拼接到domain对象的params参数中&#xff1b; 1. …

AI:100-基于卷积神经网络的农作物生长状态监测

🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的核心代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在不断更新…

基于CMT2300A定制的模组谐波测量及调试事例

1.1 芯片介绍 CMT2300A华普微推出的一款超低功耗 Sub-1GHz 射频收发器&#xff0c;是一款SPI接口射频前端芯片&#xff0c;调制方式支持OOK (G)FSK 、(G)MSK&#xff0c;速率最大可以做到300 kbps&#xff0c;休眠大概1uA&#xff0c;功率最大可以做到20dB&#xff0c;但各国的…

软文怎么写才能让消费者行动起来?媒介盒子分享

软文的本质是营销&#xff0c;做营销文案不是玩文字艺术&#xff0c;它需要洞察用户需求&#xff0c;懂产品&#xff0c;了解卖点&#xff0c;懂营销&#xff0c;懂消费心理&#xff0c;最终让消费者行动起来。有些文案可能在你看起来遣词造句和配图都很一般&#xff0c;但就是…

Python办公之Excel篇

1.准备环境 Python版本&#xff1a;3.6.5 IDE集成开发环境&#xff1a;pycharm Python库选择&#xff1a;openpyxl openpyxl操作的excel文件以xlsx结尾。 基础命令 查看 Python 版本 python --version查看 pip 版本 pip --version安装openxlsx pip install openpyxl -i…

9.静态路由

静态路由 中小型网络都会用到&#xff0c;防火墙核心交换机用的很多&#xff0c;一般是用在出口 路由表&#xff1a;路由器用来转发数据包唯一的依据 NextHop下一跳 Static静态路由需要手动设置 ip route-static 目标网段 掩码 下一跳例如&#xff1a;ip route-static 192…

QT讲程序打包成安装包让任何人可以使用

&#x1f482; 个人主页:pp不会算法v &#x1f91f; 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主 &#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 文章目录 1、release模式下编译2、windeploy 打包发布3、使用inno setu…

node.js express cors解决跨域

目录 什么是跨域 示例 postman请求 前端请求 cors中间件解决跨域 流程 配置cors参数 什么是跨域 跨域&#xff08;Cross-Origin&#xff09;是指在 Web 开发中&#xff0c;当一个网页的源&#xff08;Origin&#xff09;与另一个网页的源不同时&#xff0c;就发生了跨域…

手把手教你反编译小程序

本次实验环境 操作系统: win10 10.0.19042 node: v14.17.0 微信开发者工具: Stable 1.05.2110290 前期准备 在电脑端安装模拟器工具&#xff0c;这里以夜神模拟器为例&#xff0c; 在模拟器中安装微信&#xff1a;用于微信打开小程序时加载小程序包。在模拟器中文件管理器&…

论文笔记:A review on multi-label learning

一、介绍 传统的监督学习是单标签学习&#xff0c;但是现实中一个实例可能对应多个标签。这篇文章介绍了多标签分类的定义和评价指标、多标签学习的算法还有其他相关的任务。 二、问题相关定义 2.1 多标签学习任务 假设 X R d X R^d XRd&#xff0c;表示d维的输入空间&am…

日本服务器:确保其稳定性的几个要点

​  在租用日本服务器时&#xff0c;用户们大多一定会关注它的稳定性&#xff0c;其实这些顾及都是正常的。毕竟&#xff0c;网站要想正常运行&#xff0c;保障服务器稳定是关键。本文将讨论有关如何保障日本服务器稳定性的一些有用技巧&#xff0c;希望对您有所帮助。 1.注重…

SpringBoot 启动加载器解析

计时器介绍 启动加载器实战 实现方式1 实现CommandLineRunner接口重写run方法通过Order进行排序 示例: Component Order(1) public class FirstCommandlineRunner implements CommandLineRunner {Overridepublic void run(String... args) throws Exception {System.out.pr…