浮動列表：左對齊問題

Question

我有一個場景，我需要水平顯示列表項...... 除了第一個列表項。所有其他物品都有margin-left屬性，但是如果列表中的物品多了，那麼它就會變得不那麼好。

這裏是plunker鏈接： Demo

我需要的下拉條目（8,9,10）也應該適當地作爲第一行元素對齊。任何幫助，將不勝感激

Answer 1

更改爲first-of-type選擇器到last-of-type和margin-left到margin-right。這裏檢查更新plunker：

https://plnkr.co/edit/XZDYi37LWZGeU10HvWdC?p=preview

li:not(:last-of-type) { 
    margin-right: 40px; 
} 

Answer 2

爲什麼不試試與引導。您可以將屏幕/容器分成七個佈局（或任何可配置的佈局，通常屏幕分爲最多12個）。

而不是李，你可以簡單地有一個div元素顯示項目。

Answer 3

應用margin-right

li { 
    float: left; 
    list-style: none; 
    width: 30px; 
    height: 40px; 
    border: 1px solid black; 
    margin-right: 40px; 
} 

否則申請margin-left爲li並嘗試負利潤率爲UL

ul{ 
    margin-left: -40px; 
} 
li { 
    float: left; 
    list-style: none; 
    width: 30px; 
    height: 40px; 
    border: 1px solid black; 
    margin-left: 40px; 
} 

Answer 4

如果flexbox是一種選擇，你可以這樣做 - 把一個包裝 Flexbox的與flex-start財產沿着柔性軸 - 看演示下方updated plunkr here：

li { 
 
    list-style: none; 
 
    width: 30px; 
 
    height: 40px; 
 
    border: 1px solid black; 
 
    margin-right: 20px; 
 
    margin-bottom: 10px; 
 
} 
 
ul { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-wrap: wrap; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
</ul>