简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

li標籤實作日期，標題右對齊的方法

巴扎黑
發布： 2018-05-18 17:17:50
原創
4424 人瀏覽過


希望實現標題在左對齊，日期在右對齊，當直接給日期的span加上float:right時，IE8和FF都OK，但IE6/7則會換行，下面給出一個簡單有效的解決辦法。 

<!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>
登入後複製

注意: 要把 span 寫到Li標籤中的最前面，這樣在IE6/IE7/FF3.5之前版本中才能保證 span中日期右對齊。




#

以上是li標籤實作日期，標題右對齊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
對齊 日期 標題
來源：php.cn
上一篇：H5行動端 超實用的css3模擬邊框最新研究範例程式碼 下一篇：HTML5中meta屬性的使用程式碼範例詳解
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PHP數組從URL參數中取得的行為不如預期 我有一個包含類別ID的URL參數，我想將其視為一個數組，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它從URL參數取得數組：$catI...
來自於 2024-04-06 22:09:02
0
1
1428
我應該在 apache 中哪裡放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用運行狀況檢查url登入訪問日誌。基於此鏈接，他們提到了有關修改Customlog指令的資訊。我不是關於需要更改Cust...
來自於 2024-04-06 22:03:59
0
1
990
如何從結果集中僅顯示最低值（MYSQL） 我有以下聲明：selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommessagewherefacilityi...
來自於 2024-04-06 21:44:19
0
1
603
使用 CSS Tailwind 的圖片懸停卡動畫未如預期運作。 <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
來自於 2024-04-06 13:43:17
0
1
356
Mysql 在日期欄位中傳回一些記錄為空，因為日期有多種格式 我正在嘗試分析order_date列，並且列具有多種日期格式，我想將所有這些日期轉換為相同的格式，這將使分析order_date變得更容易。我正在嘗試分析order_date但是此...
來自於 2024-04-06 13:29:40
0
1
466
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！