ElementUI的el-card中，内部元素margin属性失效问题

问题：

在使用 el-card 时内部的分页组件超出了 el-card 的范围，而且 margin 属性失效，无法控制，很不好看：

解决方法：

给分页组件外层加一个 div，定位属性 position: relative;。就可以了。

案例：

我这里分页组件用的时 ruoyi-Vue3 中封装好的组件，其实内部用的还是 el-pagination。

错误代码：

<el-card class="box-card" style="margin: 10px;min-height: 750px;">······<el-table></el-table>······<pagination :total="total" :layout="'total, sizes, prev, pager, next'" v-model:page="pageNum" v-model:limit="pageSize" /></el-card><style scope>
.pagination{margin-right: 3%;   // 这里的 margin-right 失效了！！！
}
<style>

更新后：

<el-card class="box-card" style="margin: 10px;min-height: 750px;">······<el-table></el-table>······<div class="pagination"><pagination :total="total" :layout="'total, sizes, prev, pager, next'" v-model:page="pageNum" v-model:limit="pageSize" />
</div></el-card>
<style scope>
.pagination{position: relative; margin-right: 3%;
}
<style>

修改后的效果：
margin-right 生效了。

总结：

之前在做前端样式优化的时候，遇到过许多类似的问题，归根结底是组件分装的问题，以及定位的参考造成的。

ElementUI的el-card中，内部元素margin属性失效问题相关推荐

jsp在ie6中css的margin属性失效问题
今天写一个登录页面,其中输入用户名和密码的div我使用了margin:0 auto的css来使它居中.结果在chrome和firefox下面显示正常,在ie6下这个margin属性失效.查看了页面和c ...
html隐藏标签disable,HTML 中 Link 元素 disable 属性详解
"disabled"属性应用场景对于 link 元素,当且仅当 link 元素被用来链接一个外部样式文件时,应用"disabled"属性定义可以切换的样式表 ...
HTML中body元素的属性
body元素的属性属性描述 text 设定页面文字颜色 bgcolor 设定页面背景颜色 background 设定页面背景图像 bgproperties 设定页面的背景图像为固定状态(不随页面的 ...
recharts中Legend的margin属性设置无效
设置legend图例组件中的margin无效: return(<BarChartwidth={400}height={300}data={data}margin={{top: 20, right ...
将list中的元素按照属性分类成树状的map
技术交流群: 233513714 public LinkedHashMap<String, List<TPhoneModel>> queryPhoneList(List< ...
Android让Diglog中的元素fill_parent属性生效
lodingDialog = new Dialog(this,R.style.dialog_noBorder);lodingDialog.setContentView(R.layout.file_ex ...
Android studio中 RelativeLayout 的 layout_marginBottom 属性失效问题
第一种RelativeLayout 下设置 ImageView 失效 <ImageViewandroid:id="@+id/imageview"android:layout_ ...
a span等行内元素加margin属性后无效果解决方案
html中经常用margin属性来进行定位的调整,但a,span等行内元素加margin后不发生位移,给这些元素加上display:inline-block后就可解决:而且为行内元素加此属性后既可以像 ...
移动端元素外面使用伪类after加边框导致其内部元素无法选中
解决方法:给内部元素增加属性 position: relative; z-index: 3; 这样就能选中其内部元素了. 转载于:https://www.cnblogs.com/xiaozhumaop ...

ElementUI的el-card中，内部元素margin属性失效问题

问题：

解决方法：

案例：

总结：

ElementUI的el-card中，内部元素margin属性失效问题相关推荐

最新文章

热门文章