一、问题描述

使得填表单位那一行字与下面的表格左对齐,对表格使用css中的margin:auto实现了居中,但是对那一行字(用div包裹的)使用margin:auto不生效;并且2021年下面对应的月份是动态变化的,月份的个数不定;

二、解决方案

(1)把那行字放在表格里,再把这行表格的边框去掉;

(2)固定表格的宽度;2021年的列固定宽度,下面对应的月份的宽度按均分配;

(3)使用原生js前端操作dom,计算出外边距;

三、实现

1   mounted() {
2 const tag=document.getElementsByClassName("tg")[0]
3 let margin_value=window.getComputedStyle(tag,null).marginLeft
4 console.log(tag)
5 console.log(window.getComputedStyle(tag,null).marginLeft)
6 const value=document.getElementsByClassName("custom-title")[0]
7 console.log(value)
8 value.setAttribute("style","margin-left:"+margin_value)
9 },

解释:“tg”为表格的类名,获取表格的外边距的值;“custom-title”为那一行字所在元素的类名;给那行字的标签添加style属性,赋值即可。

四、效果

用js实现元素两个元素位置对齐的更多相关文章

  1. 交换数组中两个元素的位置,元素包括key和value 一维数组

    /*author: yangyu@sina.cndescription: 交换数组中两个元素的位置,元素包括key和value,具体用法见下面的例子*/$arr = array(11=>'a', ...

  2. js改变数组的两个元素的位子,互换、置顶

    //js数组的元素上移和下移动 var fieldData=[ {name:'id',value:'ID'} , {name:'username',value:'用户名'} , {name:'emai ...

  3. 如何在JS数组特定索引处指定位置插入元素?

    如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组var array = ["one&q ...

  4. js中如何删除某个元素下面的所有子元素?(两种方法)

    js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...

  5. Js 更换html同一父元素下子元素的位置

    //更换两个元素的位置 var exchange=function (el1, el2) { var ep1 = el1[0].parentNode, ep2 = el2[0].parentNode, ...

  6. JS高程12.2.3元素大小的学习笔记

    <JavaScript高级程序设计>中讲述了通过JS如何控制页面中元素的大小,其中涉及到三对属性:偏移量,客户区大小,滚动大小.以前自己经常看到这三对属性,但是具体不是很清楚,容易混淆.所 ...

  7. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  8. 如何借助浏览器Console使用Js进行定位和操作元素

    在进行Selenium自动化过程中,我们很难避免一些webdriver 很难定位到的一些元素(如:默认隐藏属性元素),那对于一些比较难定位到的元素,有什么好的解决办法?     其实我们都知道,Sel ...

  9. js数组依据下标删除元素

    最近在项目中遇到了一些问题,基础性的东西记得不牢固,就总结一下放在这里备再次查找,对操作js数组的一些问题一些常用的记录! 1.创建数组 var array = new Array(); var ar ...

  10. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

随机推荐

  1. python之路55 cookie与session 操作 把模块变成字符串进行导入

    django中间件三个了解的方法 1.process_view 路由匹配成功之后执行视图函数/类之前自动触发(顺序同process_request) 2.process_exception 视图函数/ ...

  2. Spring MVC复习 —— 搭建Spring MVC项目

    Spring MVC复习 -- 搭建Spring MVC项目   摘要:这篇笔记是关于Spring MVC的复习,内容是如何搭建Spring MVC项目.   让我们快速的搭建一个Spring MVC ...

  3. Coolify系列01- 从0到1超详细手把手教你上手Heroku 和 Netlify 的开源替代方案

    什么是Coolify 一款超强大的开源自托管 Heroku / Netlify 替代方案 coolLabs是开源.自托管和以隐私为中心的应用程序和服务的统称 为什么使用Coolify 只需单击几下即可 ...

  4. 从0到1手把手实现vite

    什么是Vite? 法语:轻量化,快速 基于VUE3 非 打包开发服务器,请注意,它是个开发服务器哇!! 快速开发,按需编译,不再等待整个应用编译完成 基于原生模块系统ESModule实现 说白了,就是 ...

  5. Codeforces Round #601 (Div. 2) A-E

    比赛链接 A 题意 给两个数字 \(a,b\) ,每次操作可以使 \(a\) 加上 \(+1,+2,+5,-1,-2,-5\) 中的一个数,求最少多少次操作可以将 \(a\) 变成 \(b\) . 题 ...

  6. Sundial (二)

    相关重要的组件一览 Triggers(触发器)相关类 保存触发器相关参数,例如起止时间,次数,间隔时间等,其中Sundial支持多种类型触发器 多种类型的触发器必须重写GetNextOccurrenc ...

  7. Python 装饰器原理

    装饰器是 Python 编程中常用的一个功能,可以将通用的逻辑抽象成装饰器,通过装饰器语法应用到不同的目标上,达到增强或修改目标逻辑的目的. 先来看一个简单的例子 # 打印耗时的装饰器 def log ...

  8. python线程池等待全部任务结束再继续

    import json import time from concurrent.futures import ThreadPoolExecutor, wait, ALL_COMPLETED impor ...

  9. Codeforces Round #849 (Div. 4)

    A. Codeforces Checking 题意 每个案例给一个字符,如果在 "codeforces" 中出现过,输出 YES,否则输出 NO code /** * @autho ...

  10. 一牛X同学的报告分享

    https://indico.cern.ch/event/743699/contributions/3072640/attachments/1750517/2836233/ARIES_Workshop ...