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

LI 標籤中讓文章標題左對齊，日期右對齊的方法

巴扎黑
發布： 2017-04-05 16:47:47
原創
2764 人瀏覽過

希望實現標題在左對齊，日期在右對齊，當直接給日期的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中文網其他相關文章！

相關標籤：
LI 标签，标题左对齐，日期右对齐
來源：php.cn
上一篇：如何使用white-space解決文章標題清單換行問題 下一篇：語意化你的HTML標籤和屬性
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
"Bootstrap 5 - 在手風琴內外對齊元素的邊距" 我正在嘗試對齊三個Bootstrap5網格：折疊面板外的標題折疊面板標題中的概述折疊面板內容中的詳細信息折疊面板標題有左右邊距/填充，並且折疊圖標也佔用一些空間。我希望標題和詳細資...
來自於 2023-08-31 12:54:27
0
1
225
HTML輸入的反向文字方向 對於我的網站，我需要提供阿拉伯語支援。其中一部分是提供輸入文字框，在使用者輸入時，新字元必須附加到左側，並且文字必須右對齊。將CSS屬性設為text-align:right沒有起作...
來自於 2023-08-22 12:58:49
0
2
328
WordPress選單效果如何調整 最近在折騰WordPress的主題，裝了一個《Kratos》，上方的選單列效果想調整一下，後台沒得直接修改，又不會折騰代碼，還是上來請教一下吧，主題效果如下圖：現在有兩個問題：如何...
來自於 2023-04-16 12:00:36
0
1
903
objective-c - XLForm中，如何修改原有型態cell中的空間位置？ 在Xlform庫中，作者已經寫好的各種各類別的cell，左邊的標題控制項都是左對齊，右邊的控制都是右對齊的。但是我現在需要右邊的控制項也要左對齊，如下圖： 我所用到的cell代碼為...
來自於 2017-05-02 09:37:14
0
0
553
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！