<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < title > single row coexist inline elements </ title > < style type = "text / CSS" > body { margin : 0 ; } .box1 { width : 500px ; height : 300px by ; border :Solid # 000 1px ; margin : 10px Auto 10px ;
} .box2 { width : 500px ; height : 300px by ; border : 1px Solid # 000 ; margin : 10px Auto 10px ; / * font-size: 0 * / / * if required Save to blank line between the inline element concentration in the parent needs to set the font size to zero, and then re-set in the subset. * / } .box1 div { background-Color : Gold ; } .box2 a { Color-background : Gray ; font-size : 16px ; / * width: 20px; height: 22px; width and height attributes ineffective inline element determining factor is the content length and width;. * / / * padding-Top: 20px; padding-bottom: 20px; * / padding-right : 20px ; padding-left : 20px ; / * padding down Logically inline element does not work, but would generate rendering bug, resulting in bad image batt heteroaryl chaos , each covering strife * / margin : 20px ; / * vertical inline elements will affect the margin around the pitch * / } </style> </head> <body> <div class="box1"> <div>div元素1</div> <div>div元素2</div> </div> <div class="box2"> <a href="#">a元素</a> <a href="#"><>a</a element a href="#">a元素</a> <a href="#">a元素</a> <a href="#">a元素</a> <a href="#">a元素</a> <a href="#">a元素</a> <a href="#">a元素</a> </div> </body> </html>