HTML中怎样在图片的右边显示文字

< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />
< title >无标题文档 title >

< style >
ul,p{margin:0;padding:0;}
li{list-style:none;}
.box{width:500px;margin:100px auto;}
.box .img{float:left;}
.box .img img{width:100px;height:100px;}
.box .list{float:left;width:200px;margin-left:20px;display:inline;}
.box .list li{line-height:24px;font-size:14px;}
.list li span{font-weight:bold;}
style >

head >

< body >
< div  class = "box" >
    < div  class = "img" >
        < img  src = "http://img.baidu.com/img/image/3bf33a87e950352a5947ae485143fbf2b2.jpg"  alt = ""  />
    div >

    < ul  class = "list" >
        < li >< span >姓名: span >测试 li >

        < li >< span >性别: span >男 li >

        < li >< span >描述： span >< p >测试测试测试测试测试才愁死额 p > li >

    ul >

div >

body >

html >