This is sometimes the case with Web page layouts:
If the left side with <dt>, and the right with <dd>, put on a line to display,<dt> to set Float:left, this should all know, the problem is that the first line does not have a problem, but the second line has a problem, the code is as follows:
Css:
*{margin:0;padding:0;}Body #menu{Margin-left:8px;Margin-top:8px;Border:1px solid Grey;width:490px;}Body Div DL{margin:7px 0;}Body Div DL a{text-decoration:None;font-size:10px;Color:#737373;}Body div DL DT a{Color:#e4393c;Font-weight:Bold;}body div DL DT{width:60px;float: Left;text-align: Right;Padding-right:6px;}Body Div DL DD a{Height:22px;Line-height:22px;}
Body
<Body><DivID= "Menu"><DL> <DT><ahref="#">Inspirational</a></DT> <DD> <ahref="#">Economic</a> <ahref="#">Finance and investment</a> <ahref="#">Management</a> <ahref="#">Inspirational and successful</a> </DD></DL><DL> <DT><ahref="#">Life</a></DT> <DD> <ahref="#">Tutoring and parenting</a> <ahref="#">Tour/Map</a> <ahref="#">Cooking/Food</a> <ahref="#">Fashion/Beauty</a> <ahref="#">Home</a> <ahref="#">Marriage and gender</a> <ahref="#">Entertainment/Leisure</a> <ahref="#">Fitness and Health</a> <ahref="#">Anime/Humor</a> <ahref="#">Sport/Sports</a> </DD></DL></Div></Body>
The results appear as follows:
Compared to this, it should be indented, the left big class is a column, the right detail is a column, then why is it indented? We'll add a border to <dt> and <dd>.,<dt> Green Border,<dd> Red border
If,<dt> set the Float:left, it is out of the standard document flow, so this time after the <dd> box ignores the existence of <dt>, top to the front, but the contents of the,<dd> box see < Dt> box, so will automatically go to the back of <dt>, and the next line,<dt> box height is limited, vacated the position,<dd> the content of the natural top to the front, resulting in two lines are not aligned; this time, if you let <dd> The box continues to see the <dt> box, and by the <dt> box, we can achieve the desired effect.
The above explanation can see the link: https://www.zhihu.com/question/24529373 Zhang Qiuyi back, very vivid, second understand!
This time, in the <dd> style with Overflow:hidden, you can clear the <dt> floating to the impact of the <dd>, plus, the effect
Css:
Body Div DL DD {Border: 2px red solid; overflow: hidden;}Remove the border,
Of course, this time has not given the small class plus left border, the following elaborate;
Overflow:hidden clear the impact of the float
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
