简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

How to implement date and title right alignment in li tag

巴扎黑
Release： 2018-05-18 17:17:50
Original
4424 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：
Alignment date title
source：php.cn
Previous article：H5 mobile terminal super practical css3 simulated border latest research sample code Next article：Detailed code examples for using meta attributes in HTML5
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
Latest Articles by Author
Latest Issues
PHP arrays obtained from URL parameters do not behave as expected I have a URL parameter that contains the category ID and I want to treat it as an array li...
From 2024-04-06 22:09:02
0
1
1428
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
How to display only the lowest value from a result set (MYSQL) I have the following statement: selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'...
From 2024-04-06 21:44:19
0
1
603
Image hover card animation using CSS Tailwind is not working as expected. <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
From 2024-04-06 13:43:17
0
1
356
Mysql returns some records as empty in date field because date has multiple formats I am trying to analyze order_date column and the column has multiple date formats and I wa...
From 2024-04-06 13:29:40
0
1
466
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！