一、问题描述

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

用js实现元素两个元素位置对齐

二、解决方案

（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实现元素两个元素位置对齐

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。