css - 当 div 换行时如何去除边距？

Question

我有一个固定宽度的容器 div:160px

我可以在这个容器中有多个按钮，并且宽度的增加可以优于 160px。除了第一个使用 css 的按钮外，每个按钮都有一个 margin-left 设置为 10px。

当按钮到达新行时，我想删除左边距。

JSFIDDLE

<div class="container">
    <button>Button #1</button>
    <button>Button #2</button>
    <button>Button #3</button>
    <button>Button #4</button>
    <button>Button #5</button>
    <button>Button #6</button>
    <button>Button #7</button>
    <button>Button #8</button>
</div>

    .container{
    width:160px;
    position:relative;

    margin: 0 auto;
    box-sizing: border-box;  
}

button:not(:first-child) { margin-left:10px;}

在此先感谢您的宝贵帮助!

Answer 1

将 margin 更改为 text-indent，这将确保只有第一行缩进。

.container{
    text-indent:160px;
    position:relative;

    margin: 0 auto;
    box-sizing: border-box;  
}

https://jsfiddle.net/GarryPas/kukL6k3z/1/