Fonctionnera également pour des listes ordonnées ou non-ordonnées 😉
Code HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<section class="features-filtering"> <h2 class="footer-title">Filtering</h2> <section class="filters"> <dl class="level0"> <dt>What kind of phone?</dt> <dd><a href="#">Smartphone</a></dd> <dd><a href="#">Easy Phone</a></dd> </dl> <dl class="level1"> <dt>What functions are important to you?</dt> <dd><a href="#">Speaker phone</a></dd> <dd><a href="#">Alarm</a></dd> <dd><a href="#">FM-radio</a></dd> <dd><a href="#">Calculator</a></dd> <dd><a href="#">Camera</a></dd> <dd><a href="#">One press alarm dial up</a></dd> <dd><a href="#">SMS</a></dd> <dd><a href="#">Vibrating ringer</a></dd> <dd><a href="#">Flashlight</a></dd> <dd><a href="#">Games</a></dd> <dd><a href="#">Bluetooth</a></dd> <dd><a href="#">Hide unwanted functions</a></dd> </dl> </section> </section> |
Code CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.features-filtering { text-align: center; } .features-filtering .filters dl { display: table; width: 100%; } .features-filtering .filters dd { display: inline-table; margin-bottom: 5px; } .features-filtering .filters dd a { display: block; text-align: center; min-width: 150px; padding: 5px 10px; } .features-filtering .filters dd a:hover, .features-filtering .filters dd a.active { text-decoration: none; } .features-filtering .filters .level0 dt { display: inline-block; } |