如何從ul裏的第一個li元素中刪除邊距，當其他li設置爲inline-block時

Question

在下面的代碼中，所有的li都會有左邊距，包括第一個邊距。這會將第一個元素推向右側。我不希望第一個元素被推入，我希望它保持放置狀態，而其他元素添加了餘量。我該怎麼做呢？

ul li 
{ 
    position:relative; 
    margin-left:10px; 
    display:inline-block 
} 

Answer 1

可以使用:first-child僞類

/* added to remove default styles given by browser */ 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul li { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-left: 20px; 
 
    border: 1px solid red; 
 
} 
 
ul li:first-child { 
 
    margin: 0; 
 
}

<ul> 
 
    <li>Hello world</li> 
 
    <li>Hello world</li> 
 
    <li>Hello world</li> 
 
</ul>

，或者您也可以使用+Adjacent sibling CSS選擇器會檢查是否li有一個兄弟，給margin它

/* added to remove default styles given by browser */ 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul li { 
 
    position: relative; 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
} 
 
ul li + li { 
 
    margin-left: 20px; 
 
}

<ul> 
 
    <li>Hello world</li> 
 
    <li>Hello world</li> 
 
    <li>Hello world</li> 
 
</ul>

Answer 2

理想情況下，你將要針對所有，但第一個元素。這可以使用以下選擇器來完成：

li:nth-child(n+2)