Utilisateur:Dodoïste/liste horizontale

• Joe la Fripouille
• était
• le
• plus
• grand
• voleur
• de
• grand-mères
• sans
• défense.

Tester l'utilisation de cette liste

Pour voir cette liste, il faut ajouter ce code dans votre vector.css :

vector.css

/* Style for horizontal lists (separator following item) */
.skin-monobook .hlist dl,
.skin-modern .hlist dl,
.skin-vector .hlist dl {
    line-height: 1.5em;
}
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
}
.hlist dd,
.hlist dt,
.hlist li { 
    display: inline;
    margin: 0;
}
/* Display nested lists inline */
.hlist dl dl,
.hlist ol ol,
.hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
.hlist dd:after,
.hlist dt:after,
.hlist li:after {
    content: " ·";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* for IE 8 */
.hlist dd.nopunct:after,
.hlist dt.nopunct:after,
.hlist li.nopunct:after {
    content: none;
}
/* Add parens around nested lists */
.hlist dl dl:before,
.hlist ol ol:before,
.hlist ul ul:before {
    content: "(";
}
.hlist dl dl:after,
.hlist ol ol:after,
.hlist ul ul:after {
    content: ")";
}
/* Put numbers in ordered lists */
.hlist.hnum ol li {
    counter-increment: level1;
}
.hlist.hnum ol li:before {
    content: counter(level1) " ";
}
.hlist.hnum ol ol li {
    counter-increment: level2;
}
.hlist.hnum ol ol li:before {
    content: counter(level2) " ";
}

 

Pour tester sur Internet Explorer, ajoutez le code suivant dans dans votre vector.js :

vector.js

/* Helper script for .hlist class in common.css
 * Maintainer: [[User:Edokter]]
 */
 
if ( $.browser.msie ) {
  /* remove interpunct from last list items in IE 8 */
  if ( $.browser.version == '8.0' ) {
    $( '.hlist' ).find( 'dd:last-child, dt:last-child, li:last-child' )
      .addClass( 'nopunct' );
  }
  /* Generate interpuncts and parens for IE < 8 */
  if ( $.browser.version < '8.0' ) {
    $( '.hlist' ).find( 'dd + dd, dd + dt, dt + dd, dt + dt, li + li' ).prev()
      .append( '<b>·</b> ' );
    $( '.hlist dl dl, .hlist ol ol, .hlist ul ul' )
      .prepend( '( ' ).append( ') ' );
  }
}

 

Compatibilité entre navigateurs

L'affichage de cette liste a été testé sous Mac OSX (Safari, Firefox, Chrome), Ubuntu (Firefox), Windows 7 (IE8, Chrome, Firefox). Cette méthode est largement utilisée sur la Wikipédia anglophone, et fonctionne correctement sur tous les navigateurs largement utilisés (y compris les anciennes versions de IE).