网页常遇布局样式问题解决
两个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%;"
常用转义字符例如&的含义
&中的amp就是英文ampersand的缩写,该词的意思是&这个符号
& 是 HTML 中 & 的表示方法.即在html中用&表示&符号