列表实现流式布局

 

 

首先

设一个边框div设置宽与高

biankuang{
    border:#000 1px solid;
    height:50px;
    width:600px;}

 

然后给列表设一个div

.biao12{
    height:50px;
    width:120px;
    text-align:center;
    line-height:10px;/*设置行高与宽使其上下左右居中*/
    float:left/*流式布局从左到右*/
    list-style：none/*去掉序号*/

}

body部分

    <div class="biao11">

    <ul>
    <li class="biao12">AboutStanford</li>
    <li class="biao12">AboutStanford</li>
    <li class="biao12">AboutStanford</li>
    <li class="biao12">AboutStanford</li>
    <li class="biao12">AboutStanford</li>
    
    </ul></div>

：效果图

 

利用div实现

  <div class="biao11">
        <div class="biao12">AboutStanford</div>
        <div class="biao12">Admission</div>
        <div class="biao12">Academics</div>
        <div class="biao12">Research</div>
        <div class="biao12">Campus Life</div>*/
   
        </div>