浮动列表：左对齐问题

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>