问题描述

如上图所示,我们需要将上述三个标签右对齐,就像上图是要达到的效果,一般采用的方法是对每个标签设置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. MySQL索引报错

    今天在MySQL 5.7版本的数据库中导库InnoDB表字段长度时遇到了"ERROR 1071 (42000): Specified key was too long; max key le ...

  2. C++11绑定器bind及function机制

    前言 之前在学muduo网络库时,看到陈硕以基于对象编程的方式,大量使用boost库中的bind和function机制,如今,这些概念都已引入至C++11,包含在头文件<functional&g ...

  3. 二、.Net Core搭建Ocelot

    上一篇文章介绍了Ocelot的基本概念:https://www.cnblogs.com/yangleiyu/p/15043762.html 本文介绍在.net core中如何使用ocelot. Oce ...

  4. golang中的错误处理

    0.1.索引 https://waterflow.link/articles/1666716727236 1.panic 当我们执行panic的时候会结束下面的流程: package main imp ...

  5. bootstrap-table参数

    table.bootstrapTable({ url:'/Home/geurl', //请求后台的URL(*) method:'get', //请求方式(*) toolbar:'#toolbar', ...

  6. 2022-11-08 Acwing每日一题

    本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我会认真改正的.同时也希望 ...

  7. 报错:com.mysql.jdbc.MysqlDataTruncation: Data truncation xxxx

    报错 Out of range value for column 'pk' at row 1:表的字段长度不够 Data too long for column 'ip' at row 1:表的字段长 ...

  8. Flask(一)

    pip install flask 依赖wsgi flask框架是基于werkzegu的wsgi实现,flask没有自己的wsgi 用户一旦请求,就会调用app.__call__方法 flask 路由 ...

  9. Marktext语法——Emoji表情大全

    个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github‍:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying People ️ ️ ️ ️ ‍♀️ ‍♀️ ‍♂ ...

  10. 靶机练习: Hacker_Kid-v1.0.1

    靶机: Hacker_Kid-v1.0.1 准备工作 靶机地址: https://download.vulnhub.com/hackerkid/Hacker_Kid-v1.0.1.ova MD5 校验 ...