html - Text not aligned horizontally in li -


hi using below code , text not getting aligned horizontally within li. html code:

        <body> <div id="image_header"> <img src="header.jpg" width="500" height="54" /> </div> <div id="header"> <div id="left_panel"> <h2 id="heading" align="cente">welcome <br /> center</h2>   <div id="image_src" align="center">  <img src="doc_image.jpg" align="middle" />  </div> </div> <div id="right_panel"> <p><strong> xxx</strong> </p> </div> </div> <div id="footer"> <div id="left_footer"> <div id="img_left"> <img src="separator_bar.jpg"/> </div> <div>help topics &nbsp;&nbsp;&nbsp;</div> <br /> <div id="left_list"> <ul > <li>general information</li> <li>getting started</li> <li>functions</li> <li>additional features</li> </ul> <br /> </div> </div> <div id="right_footer"> <div id="img_right"> <img src="separator_bar.jpg" /> </div> <div>manuals &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</div> <br /> <div id="right_list"> <ul> <li>guide</li> <li>&nbsp;&nbsp;&nbsp;user guide</li> </ul> <br /> </div> </div> </div> 

css:

 div {     background-color:#ebeff5; }  #image_header{     background-color:#fff }  #header,#footer {     width:500px;     position:relative;     overflow:hidden;       }  #left_panel,#left_footer{     width:250px;     float:left;     text-align:center      }  #right_panel,#right_footer{     width:250px;     float:right;     text-align:center  }  #left_panel h2{     color:#002e5c;     font:arial, helvetica, sans-serif }  #right_panel p {     letter-spacing:-1px;     padding:0px 10px;     font:arial, helvetica, sans-serif;     color:#002e5c }  #left_list ul,#right_list ul{     list-style-position:inside;     list-style-type:none;     padding:0px;     margin:0px;   }  #left_list ul li,#right_list ul li{      background-image:url(web%20bullet.jpg);     background-repeat:no-repeat;     background-position:55px 5px;      padding-left:15px;   } 

please suggest image attached !list item

from image uploaded seems looking this:

jsfiddle demo

<div id="left_list">     <ul>         <li>general information</li>         <ul>             <li>getting started</li>             <ul>                 <li>viweb functions</li>             </ul>         </ul>         <li>additional features</li>     </ul> </div> 

Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

javascript - addthis share facebook and google+ url -

ios - Show keyboard with UITextField in the input accessory view -