<! DOCTYPE html >
< html lang = " en" > < head> < meta charset = " UTF-8" > < meta name = " viewport" content = " width=device-width, initial-scale=1.0" > < title> CSS66</ title> < style> css">.inline { display : inline; } .block { display : block; background-color : pink; width : 400px; height : 100px; } .inline-block { display : inline-block; width : 260px; } .none { display : none; } </ style>
</ head> < body> < div> 我独占一行</ div> < div> 我独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < div class = " inline" > 我被取消了独占一行</ div> < hr> < span> 我不独占一行</ span> < span> 我不独占一行</ span> < span class = " block" > 我被执行了独占一行</ span> < span class = " block" > 我被执行了独占一行</ span> < span class = " block" > 我被执行了独占一行</ span> < span class = " block" > 我被执行了独占一行</ span> < hr> < div class = " inline-block" > 我不独占一行,且可以调节宽高</ div> < div class = " inline-block" > 我不独占一行,且可以调节宽高</ div> < hr> < div class = " none" > 你看不到我</ div> < hr> < div class = " flex" > < div class = " item" > 项目</ div> < div class = " item" > 项目</ div> < div class = " item" > 项目</ div> </ div> </ body> </ html>