Home > Web Front-end > H5 Tutorial > How to implement date and title right alignment in li tag

How to implement date and title right alignment in li tag

巴扎黑
Release: 2018-05-18 17:17:50
Original
4465 people have browsed it


I hope that the title will be aligned to the left and the date will be aligned to the right. When float:right is directly added to the span of the date, both IE8 and FF will be OK, but IE6/7 will wrap the line. Here is a simple and effective solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
<style>
<!--

#mylist { width:400px; list-style-type:none; margin:0; padding:0; }
#mylist li span {
        float:right; 
}
--> 
</style> 
</head> 
<body> 
<ul id="mylist">

        <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>
        <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>
        <li><span>2011-12-2</span>Web开发者网络(Admin10000.com)</li>         
</ul>

</body> 
</html>
Copy after login

Note: You need to write span at the front of the Li tag, so that the date in span can be right-aligned in versions before IE6/IE7/FF3.5.




The above is the detailed content of How to implement date and title right alignment in li tag. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template