elmentUI 垂直居中问题

如图,来自element官网。 好像是官网给的例子都不是垂直居中的 查看控制台,好像是行高的问题 把行高注释了就好了 但是为什么会出现这种问题啊? 官方有给出解决办法吗? 有什么优雅的做法吗?

CSS Flex 弹性盒子布局问题

问题描述 弹性盒子布局,子元素内容从左到右,超出换行,如果子元素内容不等,高度就不一致这种情况我希望换行的子元素能自动填充高度使排列更整齐,贴上图片; 相关代码 display: flex;flex-flow: row wrap; 实现效果: 换行的子元素自动填充空白部分:

css选择器

请问如何将同class的第一个元素选出来呢? <!DOCTYPE html> <html> <head> <style> .test:nth-of-type(1) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p class=”test”>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> <p class=”test”>第六个段落。</p> <p>第七个段落。</p> <p>第八个段落。</p> <p>第九个段落。</p> .test:nth-of-type(1) 以及 nth-of-child(1)都不行呢?我想让第一个p.test 变红该怎么实现呢

el-form-item 内的 el-select如何自适应宽度

问题:想让el-select自适应宽度,即 label宽度 + el-select宽度可以填满一行,想要实现这样的效果 详细描述:项目中的代码如下,给 el-select 设置了 style=”width:100%” 没有作用,不论布局是变大变小,el-select 的宽度都不会有变化,就像下图所示 我只有在el-select中设置固定的值如 style=”width:100px”才有作用。下面是我的代码,不知道是不是我对width的设置方法有错 <el-form :inline=”true” :model=”searchInfo” label-width=”80px” label-position=’left’ size=”mini”> <el-row> <el-col :span=”12″> <!– TODO:设置select与label同行,select自动填充剩余宽度 –> <el-form-item label=”出发地” prop=”start”> <el-select v-model=”searchInfo.start” style=”width:100%” placeholder=”选择出发地”> <el-option v-for=”item in startOptions” :key=”item.value” :label=”item.label” :value=”item.value”></el-option> </el-select> </el-form-item> </el-col> <el-col :span=”12″> <el-form-item label=”出发地点” prop=”start”> <el-select v-model=”searchInfo.end” style=”width:100%” placeholder=”选择目的地”> <el-option v-for=”item in endOptions” :key=”item.value” :label=”item.label” :value=”item.value”></el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> 想用div将el-select框起来,使用类似于这样的方法 <div style=”display:inline-block”> <div style=”display:inline-block”> 但是,el-form-item 是 el-select的父组件没办法这样做。。 网上搜索不到其他方法,大佬们能顺便告诉我一下,这种问题应该怎么进行搜索吗?

css中使用inline-block布局的问题

我在开发一个移动端网页,想写一个头部元素,内容包含城市选择,搜索框和类别选择,我想让这三个元素平行显示且两端对齐。但是我的程序不知道什么原因右端无法对齐。 <div id=”mallHeader” class=”item-box”> <div class=”item align-center”> <span>北京<i class=”iconfont icon-caret”></i></span> <span><i class=”iconfont icon-sousuo”></i><input type=”search” placeholder=”搜索” name=”search”></span> <span><i class=”iconfont icon-jishiben”></i><p>兴趣</p></span> </div> </div> css: #mallHeader { width: 100%; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; text-align: justify; background-color: lightblue; background-size:100%; height: 4.666666rem; margin: 0 auto; .item { margin: 0.8rem 0.266666rem 0.266666rem; vertical-align: middle; position: fixed; text-align: center; span { @include font-dpr(14px); text-align: center; vertical-align: middle; display: block; position: relative; margin:0 auto; padding-left:0.1rem; padding-right:0.1rem; input { width: 7.04rem; height: 0.8rem; border-radius: 0.4rem; padding-left: 0.773333rem; } i { text-align: center; } p { text-align: center; /*line-height: 0.4rem;*/ @include font-dpr(8px); vertical-align: middle; } .icon-sousuo { position: absolute; margin-left: 0.24rem; line-height: 0.8rem; } } } } 我用chrome的console看的时候发现.item没有100%width,要如何修改呢? 谢谢。

发现一个非常有趣的css 效果,它的@keyframes时间比是怎么分配的?

效果动画 想知道它 时间节点 是怎么算出来的?得到规律能否把它应用到任意大小的div上? @keyframes atom { 0% {transform: translateX(0) rotate(0);} 30%{transform: translateX(var(–tr-X)) rotate(0);} 50% {transform: translateX(var(–tr-X)) rotate(180deg);} 80% {transform: translateX(0) rotate(180deg);} 100% {transform: translateX(0) rotate(360deg);} }

element-ui中的el-date-picker组件中某一日期上方多渲染一个字?

问题描述 如图,在vue项目中用的element-ui组件中的el-date-picker的日期范围选择组件,莫名多渲染一个“岁”字。奇怪的是,同样用的谷歌浏览器,却在部分人电脑上出现这个Bug,而且这部分人的电脑上这个Bug偶尔出现偶尔没事。 问题出现的环境背景及自己尝试过哪些方法 相关代码 <el-date-picker v-model=”common.searchForm.created” value-format=”yyyy-MM-dd” style=’width:267px;line-height: 30px;margin-top: 10px;’ type=”daterange” range-separator=”-” start-placeholder= “开始时间” end-placeholder= “结束时间”> </el-date-picker>

Vue遍历这段如何解决重复问题

请问大神,如何让遍历出来的东西,江苏安徽只需要一个就够了。常州盐城扬州显示足够了,安徽的下一级隐藏 <template> <div> <select> <option v-for=”mx in list”> {{mx.prov}} </option> </select> <select> <option v-for=”mx in list”> {{mx.city}} </option> </select> <select> <option v-for=”mx in list”> {{mx.shop}} </option> </select> </div> </template> <script> export default{ data(){ return{ list: [{ “prov”: “\u6c5f\u82cf”, “city”: “\u5e38\u5dde”, “shop”: “\u5e38\u5dde\u745e\u5f69\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8” }, { “prov”: “\u6c5f\u82cf”, “city”: “\u76d0\u57ce”, “shop”: “\u76d0\u57ce\u4f17\u60e0\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8” }, { “prov”: “\u6c5f\u82cf”, “city”: “\u626c\u5dde”, “shop”: “\u626c\u5dde\u767e\u745e\u6770\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8” }, { “prov”: “\u5b89\u5fbd”, “city”: “\u5b89\u5e86”, “shop”: “\u5b89\u5e86\u5e02\u4e50\u745e\u884c\u6c7d\u8f66\u9500\u552e\u6709\u9650\u516c\u53f8” }, { “prov”: “\u5b89\u5fbd”, “city”: “\u868c\u57e0”, “shop”: “\u868c\u57e0\u5e02\u6da6\u5229\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8” }, { “prov”: “\u5b89\u5fbd”, “city”: “\u4eb3\u5dde”, “shop”: “\u5b89\u5fbd\u7701\u4eb3\u5dde\u5e02\u82f1\u65d7\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8” }, { “prov”: “\u5b89\u5fbd”, “city”: “\u4eb3\u5dde”, “shop”: “\u8499\u57ce\u53bf\u82f1\u65d7\u6c7d\u8f66\u9500\u552e\u6709\u9650\u516c\u53f8” }, { “prov”: “\u5b89\u5fbd”, “city”: “\u6c60\u5dde”, “shop”: “\u6c60\u5dde\u5e02\u4e07\u4f17\u5b9e\u4e1a\u6709\u9650\u8d23\u4efb\u516c\u53f8” }, { “prov”: “\u5b89\u5fbd”, “city”: “\u6ec1\u5dde”, “shop”: “\u6ec1\u5dde\u5e02\u548c\u5947\u7965\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8” }] } } } </script>