2014-01-28 91 views
2

每3「禮」之間的財產在這裏,我創建了一個ul li列表與float:left每個li標籤。並補充float:none;在線財產每隔3個li。我只想用CSS做條件。「浮動:無」使用CSS

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <style> 
    ul 
    { 
     list-style:none; 
    } 
    ul li 
    { 
     margin-right:10px; 
     float:left; 
    } 
    </style> 
    </head> 
    <ul> 
    <li>List 1</li> 
    <li>List 2</li> 
    <li style="float:none;">List 3</li> 

    <li>List 4</li> 
    <li>List 5</li> 
    <li style="float:none;">List 6</li> 

    <li>List 7</li> 
    <li>List 8</li> 
    <li style="float:none;">List 9</li> 

    <li>List 10</li> 
    <li>List 11</li> 
    <li style="float:none;">List 12</li> 

    <li>List 13</li> 
    <li>List 14</li> 
    </ul> 
    <body> 
    </body> 
    </html> 
+0

所以有什麼問題嗎?請更清楚 – sree

回答

5

你會使用ul li:nth-child(3n)每第三li元素目標。

EXAMPLE HERE

ul li { 
    margin-right:10px; 
    float:left; 
} 
ul li:nth-child(3n) { 
    float:none; 
} 

如果你想獲得幻想,你可以使用:not()排除從最初的造型第三li元素和避免覆蓋float:left

EXAMPLE HERE

ul li:not(:nth-child(3n)) { 
    float:left; 
} 
0
li:nth-child(3n){ 
    float:none; 
} 

將它添加到CSS而不是內嵌樣式。那是你在找什麼?

0
ul { 
    list-style:none 
} 
ul li 
{ 
float:left; 
position:absolute; 
} 

這裏如果設置像li這樣的子類就意味着它獨立。