本文介绍了一种利用CSS Flex布局来优化用户界面的设计方法，通过调整元素的排列方式和间距，实现更灵活且响应式的布局效果。文章还提供了一个简单解决方案，即通过添加padding和负margin来快速调整元素位置。
试试用flex吧
*{
margin: 0;
padding: 0;
}
.rule{
width:200px;
}
.text{
display: -webkit-flex;
display: flex;
}
.rule h5{
color: #326a9e;
font-size:14px;
-webkit-flex: 1;
flex: 1;
line-height: 20px;
}
.tip{
background-color:#326a9e;
border-radius: 100%;
color: #fff;
font-size: 12px;
display: inline-block;
margin: 2px;
width:16px;
height:16px;
font-weight: normal;
text-align: center;
-webkit-flex:0 0 16px ;
flex: 0 0 16px;
}
1
我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明
2
我是活动说明我是活动说明我是
当然用原来的样式也可以，加个padding和负margin，简单解决
*{
margin: 0;
padding: 0;
}
.rule{
width:200px;
}
.rule h5{
color: #326a9e;
margin-bottom: 0.5em;
font-size:14px;
line-height: 20px;
padding-left: 16px;
}
.tip{
background-color:#326a9e;
border-radius: 100%;
color: #fff;
font-size: 12px;
display: inline-block;
margin-right: 2px;
width:16px;
height:16px;
font-weight: normal;
text-align: center;
vertical-align:middle;
line-height: 16px;
margin-left: -16px;
}
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
