2015-11-29 73 views
0

我怎麼能證明UL內裏的元素,但在最後一行的元素漂浮到左像http://www.barrelny.com/blog/text-align-justify-and-rwd/ - 圖6 我想這樣做:如何證明一個元素中李

ul{ 
 
    width:100%; 
 
    background-color:grey; 
 
} 
 
li{width: 250px; 
 
     height:270px; 
 
     background-color:pink; 
 
     display: inline-block; 
 
     margin-bottom:10px;}
<ul> 
 
     <li> 
 
     <div>1</div> 
 
     </li> 
 
     <li> 
 
     <div>2</div> 
 
     </li> 
 
     <li> 
 
     <div>3</div> 
 
     </li> 
 
     <li> 
 
     <div>4</div> 
 
     </li> 
 
     <li> 
 
     <div>5</div> 
 
     </li> 
 
     <li> 
 
     <div>6</div> 
 
     </li> 
 
     <li> 
 
     <div>7</div> 
 
     </li> 
 
     </ul>

+0

最簡單的事 –

回答

1

試試這個 HTML

<ul> 
    <li> 
    <div>1</div> 
    </li> 
    <li> 
    <div>2</div> 
    </li> 
    <li> 
    <div>3</div> 
    </li> 
    <li> 
    <div>4</div> 
    </li> 
    <li> 
    <div>5</div> 
    </li> 
    <li> 
    <div>6</div> 
    </li> 
    <li class="floatright"> 
    <div>7</div> 
    </li> 
    </ul> 

CSS

ul{ 
    max-width:87%; 
    background-color:grey; 
    display:table; 
} 
.floatright 
{ 
    float:right 
} 
li{ 
    margin:15px; 
    float:left; 
    width: 250px; 
     height:270px; 
     background-color:pink; 
     display:table-cell; 
     margin-bottom:10px;} 
做的是使第8元素及其可見性設置爲隱藏