Home > Article > Web Front-end > Div CSS layout example: use dl dt dd to make a list_html/css_WEB-ITnose
Div CSS layout example: use dl dt dd to make a list_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:30:161178browse
When using DIV CSS to make lists, the most commonly used ones are ul and li. However, there are two troublesome places in this way:
1. If you use UL for layout, The right column is more troublesome;
2. It is troublesome to adapt the border outside the text;
3. The height may have to be fixed;
So, take a closer look at this layout and think At first thought, it is reasonable to use DL.DT.DD:
1. The layout is more reasonable;
2. It will be easy to expand in the future;
3. There must be very little CSS;
Try writing it and see if it’s okay! Within control!
Needless to say about layout distribution:
The source code is as follows:
Use DL, DT and DD to make lists
title
|
| *{ margin:0; padding:0;} body{ font-size:12px; line-height:1.8; padding:10px;} dl{clear:both; margin-bottom:5px ;float:left;} dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF} dd{ position:absolute; right:5px;} h1{clear: both;font-size:14px;} |