CSS给一行按钮统一设置间隔

news2024/9/30 10:35:55

使用css的+(相邻兄弟选择器),找到指定元素后面的相邻元素。

 

<div class="btn-list">
    <button class="btn">按钮1</button>
    <button class="btn">按钮2</button>
    <button class="btn">按钮3</button>
  </div>
<style scoped lang="scss">
.btn-list {
  .btn+.btn {
    margin-left: 10px;
  }

  // 如果button查找使用标签选择器 如下也是一样的效果
   button+button {
    margin-left: 10px;
  }
}
</style>

 

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

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

相关文章

Arthas memory(查看 JVM 内存信息)

文章目录 二、命令列表2.1 jvm相关命令2.1.11 memory&#xff08;查看 JVM 内存信息&#xff09;举例1&#xff1a;查看 JVM 内存信息 本人其他相关文章链接 二、命令列表 2.1 jvm相关命令 2.1.11 memory&#xff08;查看 JVM 内存信息&#xff09; 基本用法&#xff1a; mem…

第一讲-环境安装

PyCharm安装 官网下载 https://www.jetbrains.com/pycharm/ 点击Download跳转到下载界面,会有专业版跟社区版两个选择,专业版需要购买,可自行在淘宝上买个激活码。一般开发社区版够用了。 这是专业版: 这是社区版:

WinRAR技巧:如何给多个压缩包设置同一个密码

RAR压缩包是大家经常使用的文件&#xff0c;并且可以进行加密&#xff0c;也是一种文件加密方式&#xff0c;那么当你有很多文件都需要压缩加密&#xff0c;b并且想要设置同一个密码&#xff0c;防止以后忘记密码&#xff0c;该如何高效的完成这个工作呢&#xff1f;今天分享如…

vue2中使用tailwindCss 详细教程

1、先看官方文档&#xff1a;https://www.tailwindcss.cn/ 2、先安装&#xff1a;npm install -D tailwindcss ---------------通过 npm 安装 tailwindcss&#xff0c;然后创建你自己的 create your tailwind.config.js 配置文件。 npm install -D tailwindcss 3、初始化文件…

解决Java调用通义接口出现依赖爆红与API-key找不到(日常小记)

1.依赖dashscope-sdk-java爆红 解决方法&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>dashscope-sdk-java</artifactId><exclusions><exclusion><groupId>org.slf4j</groupId><artifactId…

跑批系统设计

需求分析 将大批量的数据&#xff0c;从一个地方&#xff0c;迁移到另外一个地方&#xff0c;如何处理 主要的涉及到的问题 亿级数据怎么存怎么防止重复调度怎么做到负载均衡同一个节点&#xff0c;任务怎么并行如何动态调整并发度机器节点挂了怎么办 概要设计 数据存储 …

springboot整合MybatisPlus+MySQL

上一篇&#xff1a;springboot整合sentinel和对feign熔断降级 文章目录 一、准备二、主要工作三、具体步骤3.1 准备数据库环境3.20 pre引入依赖3.2 引入依赖3.3 bootstrap.yml配置mybatisplus3.40 pre引入service、mapper3.4 引入实体类、service、mapper 四、测试目录结构 五…

数据结构 ——— 单链表oj题:移除链表中所有 val 的元素

目录 题目要求 手搓简易单链表 代码实现 题目要求 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回新的头节点 手搓简易单链表 在实现以上逻辑函数前&#xff0c;要先手搓一个单链表出来&#xff…

iOS--App启动过程及优化

前言 App启动是用户对于一个app的第一印象&#xff0c;因此如何使用户在最短的时间打开进入app显得格外重要。启动优化因此成为了App调优至关重要的一项。 只有具体了解了App的启动过程&#xff0c;我们才能对其进行优化。 App启动过程 App启动分为冷启动和热启动 热启动&…

公司申请商标注册需要什么材料

申请商标注册的&#xff0c;应当向商标局提交《商标注册申请书》及其它文件&#xff0c;具体要求是&#xff1a; 1、申请人必须按一类商品一件商标一份申请的原则&#xff0c;提交《商标注册申请书》一份。也即一份申请书上填报的商品或服务只能限定在《商标注册用商品和服务国…

Debian 配置 Python 开发与运行环境

配置 Python 开发与运行环境。 1.3.1. Debian下的安装与配置 Debian 是一个致力于自由软件开发并宣扬自由软件基金会理念的自愿者组织。 Debian 计划创建于 1993 年。当时&#xff0c;Ian Murdock 发出一份公开信&#xff0c; 邀请软件开发者们参与构建一个基于较新的 Linux …

Java8/9/10/11新特性

目录 一、 Lambda表达式二、函数式(Functional)接口三、方法引用与构造器引用3.1、方法引用3.2 构造器引用和数组引用3.2.1 构造器引用3.2.2 数组引用 四、 强大的Stream API4.1 Stream API说明4.2 Stream 的操作三个步骤4.3 创建 Stream方式4.4 、Stream 的中间操作4.4.1 筛选…

Python | Leetcode Python题解之第447题回旋镖的数量

题目&#xff1a; 题解&#xff1a; class Solution:def numberOfBoomerangs(self, points: List[List[int]]) -> int:ans 0for p in points:cnt defaultdict(int)for q in points:dis (p[0] - q[0]) * (p[0] - q[0]) (p[1] - q[1]) * (p[1] - q[1])cnt[dis] 1for m i…

使用DolphinScheduler调度实现sqoop增量导入时遇到 Caused by:Class QueryResult not found 错误解决

解决方法&#xff1a; 拷贝一个 QueryResult.jar 到 sqoop 的 lib 下 【临时解决方案】 报错信息中有一个相关路径&#xff01;拷贝该路径下的QueryResult.jar到sqoop的lib下&#xff1a; cp /tmp/sqoop-root/compile/dc8e6e7d48be670d676323bf76fd9fe9/QueryResult.jar /op…

通信工程师笔记

第一章 1.支撑网是使业务网正常运行,增强网络功能,提供全网服务质量以满足用户要求的网络。 2.常见的有线通信线路包括&#xff08;1&#xff09;双绞线&#xff0c;&#xff08;2&#xff09;同轴电缆&#xff0c;&#xff08;3&#xff09;光纤等&#xff0c;无线通信线路是…

过渡到内存安全语言:挑战和注意事项

开放源代码安全基金会 ( OpenSSF )总经理 Omkhar Arasaratnam 讨论了内存安全编程语言的演变及其为应对 C 和 C 等语言的局限性而出现的现象。 内存安全问题已存在五十多年&#xff0c;它要求程序员从内存管理任务中抽离出来。 Java、Rust、Python 和 JavaScript 等现代语言通…

NLP_情感分类_机器学习(w2v)方案

文章目录 项目背景数据清洗导包导入数据切分评论及标签Word2Vec构造w2v 数据切分模型训练查看结果 同类型项目 项目背景 项目的目的&#xff0c;是为了对情感评论数据集进行预测打标。在训练之前&#xff0c;需要对数据进行数据清洗环节&#xff0c;前面已对数据进行清洗&…

数据权限的设计与实现系列11——前端筛选器组件Everright-filter集成功能完善2

‍ 筛选条件数据类型完善 文本类 筛选器组件给了一个文本类操作的范例&#xff0c;如下&#xff1a; Text: [{label: 等于,en_label: Equal,style: noop},{label: 等于其中之一,en_label: Equal to one of,value: one_of,style: tags},{label: 不等于,en_label: Not equal,v…

2024年9月30日历史上的今天大事件早读

1626年9月30日 清太祖努尔哈赤去世 1862年9月30日 德国首任宰相俾斯麦实行“铁血政策” 1887年9月30日 黄河决口 1931年9月30日 国际联盟决议日本撤兵 1937年9月30日 平型关战役结束 1938年9月30日 慕尼黑协议签订 1938年9月30日 前中华民国国务总理唐绍仪遇刺身亡 1941…

使用three.js 实现测量

使用three.js 实现测量 在线预览https://threehub.cn/#/codeMirror?navigationThreeJS&classifyapplication&idlineMeasure 在 https://threehub.cn 中还有很多案例 <!doctype html> <html lang"en"> <head> <meta charset"U…