锦绣前程3future
2019-06-01 10:08
采纳率: 92.3%
浏览 1.4k

求助html,li标签中的文字和图片不在一行!

<div class="dh1">
                <ul>
                    <li><img src="http://static.nipic.com/images/favicon.ico" /><a href="#" />昵图网</a></li>
                    <li><img  src="https://www.baidu.com/cache/icon/favicon.ico" /><a href="#" />百度图片</a></li>
                    <li><img  src="./00000.jpg" /><a href="#" />搜狗图片</a></li>
                    <li><a href="#" />360图片</a></li>

                    </ul>   
</div>
.dh1{width:1000px;
height:30px;
margin:0 auto;
background:white;
margin-bottom:10px;
}


.dh1 li{
display:block;
float:left;
width:25%;
line-height:30px;
list-style:none; 
}

.dh1  li img{
display:block;
line-height:30px;
width:30px;
padding:0px;
margin:0px;
vertical-align: middle;
}

.dh1 li a{
font-size:20px;
color:black;
}

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 听楼一夜雨 2019-06-01 10:12
    已采纳

    你的图片不要加display:block;这样会独自占一行

    <style>
    
    ul,li{margin:0;padding:0;list-style-type:none;}
    ul{font-size:0}ul{font-size:0}/*父级设置为0,保证li之间不会因为空格回车换行*/
    .dh1{
        width:1000px;
        height:30px;
        margin:0 auto;
        background:white;
        margin-bottom:10px;
    }
    .dh1 li{
        float:left;
        width:25%;
        height:30px;
    }
    .dh1  li img{
        width:30px;
        height:30px;
        float:left;
    }
    
    .dh1 li a{
        line-height:30px;
        display:inline-block;
        height:30px;
        font-size:20px;
        color:black;
    }
    </style>
    
    打赏 评论

相关推荐 更多相似问题