网页常遇布局样式问题解决

两个div并列同一行

需求：两个div块级元素在同一行水平显示

说明：两种方法来实现

          1、两个div全部设置成display:inline-block;

          2、前一个div设置成为：float:left   后一个div设置为float：right

<div><div class="header"><div class="left">hello</div><div class="right"><img class="img" mode="aspectFit" src="/static/icon/me.png"></div></div>.header{width:100%;line-height: 20px;.left{display: inline-block;font-size: 16px;}.right{float:right;right:20px;width: 20px;height:20px;.img{width:100%;height:100%;}}
}

label 文字右对齐，input左对齐

 让label成为行内块元素，给其宽度，然后让文字居右即可

.block{width: 400px;display: block;margin:5px 0;}
.center{text-align: center;
}
label {display: inline-block;width: 100px;text-align: right;
}
input,textarea{vertical-align: top;
}

最大宽度设置

style="width: 100%;"

 CSS常用样式网站

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。https://v3.bootcss.com/

网页设计常用组件库网站 

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN