float情况下使用line-height垂直居中注意的若干问题

最新推荐文章于 2022-04-03 13:22:54 发布

weixin_33859844

最新推荐文章于 2022-04-03 13:22:54 发布

阅读量995

点赞数

文章标签： python

原文链接：https://my.oschina.net/wangch5453/blog/667244

版权

2019独角兽企业重金招聘Python工程师标准>>>

以下为关键部分代码，其他部分已经省略

<ul id="summary">
                <li id="summary_price">
                  <p>商&nbsp;品&nbsp;价：</p>
                  <div class="content">
                    <b>￥22.90</b>
                    <a href="#">(降价通知)</a>
                  </div>
                </li>
                <li id="summary_market">
                  <p>商品编号：</p>
                  <div class="content">
                    <span>960148</span>
                  </div>
                </li>
                <li id="summary_grade">
                  <p>商品评分：</p>
                  <div class="content">
                    <span></span>
                    <a href="#">(已有<b>47622</b>人评价)</a>
                  </div>
               </li>
</ul>

#summary{
/*上外边距，上内边距，虚线上边框*/
margin-top:10px;
padding-top:10px;
border-top:1px dotted #ddd;
}
#summary li,#choose li{
line-height:24px;
height:24px;
padding:5px 0px;
}
#summary a{
color:#005aa0;
}
#summary li>p,#choose li>p{
/*宽度，右对齐，左浮动，行高*/
font-family:simsun;
width:72px;
text-align:right;
float:left;
/*行高*/
}
#summary li div.content,#choose li div.content{
/*浮动,行高*/
float:left;
}
#summary_price b{
/*大小，颜色*/
font-size:18px;
color:#e4393c;
}

#summary_grade span{
/*显示模式，宽度，高度，背景*/
display:inline-block;
width:75px;
height:15px;
background:url(Images/iconlist_1.png) no-repeat -109px -238px;
}