Heim > Artikel > Web-Frontend > So implementieren Sie die rechte Ausrichtung von Datum und Titel im Li-Tag

So implementieren Sie die rechte Ausrichtung von Datum und Titel im Li-Tag

巴扎黑Original: 2018-05-18 17:17:504432Durchsuche

Ich hoffe, dass der Titel nach links und das Datum nach rechts ausgerichtet wird. Wenn float:right direkt zur Spanne des Datums hinzugefügt wird, sind sowohl IE8 als auch FF in Ordnung, aber IE6/7 wird das umbrechen Hier ist eine einfache und effektive Lösung.

<!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>

Hinweis: Sie müssen span an den Anfang des Li-Tags schreiben, damit das Datum in span in Versionen vor IE6/IE7/FF3.5 rechtsbündig ausgerichtet werden kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die rechte Ausrichtung von Datum und Titel im Li-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：H5-Mobilterminal, super praktischer CSS3-simulierter Rand, neuester ForschungsbeispielcodeNächster Artikel：H5-Mobilterminal, super praktischer CSS3-simulierter Rand, neuester Forschungsbeispielcode

In Verbindung stehende Artikel

Mehr sehen