问题描述

如上图所示,我们需要将上述三个标签右对齐,就像上图是要达到的效果,一般采用的方法是对每个标签设置margin-left这样就需要设置三个值。

当文字变长或者变成英文的时候又需要重新设置,否则就会对不齐。因此采用下面的方式可以灵活的适应标签的长度实现右对齐。

以第一行的导入策略为例代码如下:

<div v-if="isImport" class="importStrategy">
<div class="form-label">{{$t('query.importStrategy')}}</div>
<el-select size="mini" v-model="importStrategy" :placeholder="$t('query.selectImportStrategy')">
<el-option v-for="item in trategies" :key="item.key" :label="item.label" :value="item.key"></el-option>
</el-select>
<span v-show= "importStrategy==''" class="error">{{$t('query.importStrategyEmpty')}}</span>
</div>

如上述代码所示,对第二行的class设置css样式如下:

form-label {
display: inline-block;
margin-left: auto;
width: 240px;
}

之后对用例库和分支也采用同样的方式设置一下css,只要width也等于240px,那么就可以实现三个标签的右对齐,且只要长度不超过width的标签都可以自动对齐。

原理解释

首先,display:inline-block是让这个div变成行内块元素,否则后面的输入框会换行。

其次,关键是margin-left:auto属性,它可以实现元素靠右对齐,也就是说auto会让左边自动占满,但是width属性必须设置,否则不会生效。

因此,margin-right:auto 可以实现左对齐。margin: 0 auto可以实现水平居中。

 

margin-left:auto的妙用的更多相关文章

  1. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  2. margin:0 auto;不居中

    margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...

  3. margin:0 auto 与 text-align:center

    1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;            text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...

  4. margin:0 auto 与 text-align:center 的区别

    基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;  一般情况下设置文本对齐方式的时使用此属性.支 ...

  5. IE下margin:0 auto为什么不居中?

    http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...

  6. float了的元素和内联元素不支持margin:auto

    float了的元素和内联元素不支持margin:auto

  7. IE下div使用margin:0px auto不居中的原因

    IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...

  8. margin:0 auto在IE中失效的解决方案

    转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...

  9. html页面docutype前面出现字符会导致IE678 margin:0 auto;失效

    html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效

  10. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

随机推荐

  1. 手把手教你从安装CentOS7.4镜像开始,搭建IoT视频监控系统

    摘要:在CentOS7.4服务器版本的环境下安装nginx服务器.配置文件服务器.流媒体服务器. 本文分享自华为云社区<华为云ECS服务器安装CentOS7.4镜像,部署GINX服务器.搭建物联 ...

  2. stm32h750移植lvgl

    之前没做过ui,只用过lcd画几条线写点字,如果按键.菜单什么的全用线画也太麻烦了,所以需要一个ui库. 听说lvgl用的人很多,就打算裸机移植一下用用.本文移植的lvgl版本是lvgl6.2,也移植 ...

  3. SpringBoot 常用注解的原理和使用

    @AutoConfiguration 读取所有jar包下的 /META-INF/spring.factories 并追加到一个 LinkedMultiValueMap 中.每一个url中记录的文件路径 ...

  4. Day1:Markdown文本基础操作

    Markdown学习 标题 一级标题 输入:#+空格+标题名字 :快捷键(Ctrl+1~6) 二级标题 输入:##+空格+标题名字 为二级标题 依次加#(最多六级标题) 三级标题 四级标题 字体 He ...

  5. perl chmod

    chmod函数改变一列文件的权限.列表的第一个元素必须是数字模式.chmod函数返回成功改变了的文件的数目.如: $cnt = chmod 0755, 'file1', 'file2';  其中最前面 ...

  6. PHPMQTT问题一二三

    问题一:PHPMQTT作为客户端订阅超过一定数量的主题后,系统就会报错. 思路:在网上查找原因,失败: 打开调试debug = true ; 结果proc方法中报错: eof receive 问题二: ...

  7. java集合类 collection接口,List集合

    java集合类:collection接口,List集合 在java.util包中提供了一些集合类,集合类又被称为容器,常用的有List集合,Set集合,Map集合.下面将介绍collection接口和 ...

  8. -webkit-box-orient:vertical 编译报错之autoprefixer问题

    由于各大浏览器的兼容问题,autoprefixer 插件 就可以帮我们自动补齐前缀.它和 less.scss 这样的预处理器不同,它属于后置处理器. 预处理器:在打包之前进行处理 后置处理器:在代码打 ...

  9. linux开机进入grub rescue界面修复

    一.先输入ls回车,查看显示内容 如: (hd0) (hd0,msdos1) (hd0,msdos2)... 二.然后找出哪个盘安装了系统 ls (hd0,msdos1)/boot/grub/ ls( ...

  10. 基于 RocketMQ 的 Dubbo-go 通信新范式

    本文作者:郝洪范 ,Dubbo-go Committer,京东资深研发工程师. 一.MQ Request Reply特性介绍 什么是 RPC 通信? 如上图所示,类似于本地调用,A 服务响应调用 B ...