Div + CSS layout example: Use dl dt dd to create a list

Document directory

• Tags:

When using DIV + CSS to create a list, we usually use ul and li to compile the list. However, there are two troublesome scenarios:

1. If UL is used for layout, the right column is troublesome;
2. It is difficult to adapt the border outside the text;
3. It is very likely that the height should be fixed;

So, let's take a closer look at this layout and think it's reasonable to use DL. DT. DD:

1. reasonable layout;
2. Future expansion is very convenient;
3. CSS must be rare;

I tried to write it. It's okay to have a look! Within the controllable range!

Needless to say:

The source code is as follows:

Use DL, DT, and DD to create a list

<H1> title <Div> <Dl> <Dt> <a href = "32"> · I wrote my own blog articles! </A> </dt> <Dd> author: James Zhang </dd> </Dl> <Dl> <Dt> <a href = "3232"> · I wrote my own blog articles! </A> </dt> <Dd> author: James Zhang </dd> </Dl> <Dl> <Dt> <a href = "3232"> · I wrote my own blog articles! </A> </dt> <Dd> author: James Zhang </dd> </Dl> ........... </Div>

 

CSS Section

* {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 ;}

 

Tags: