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

Question

<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;
}

Answer 1

你的图片不要加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>