html字段两边顶格换行,css布局，文字换行对齐问题

试试用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;

}

1我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明我是活动说明

2我是活动说明我是活动说明我是