div 换行时如何去除边距？

Question

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

我可以在这个容器中有多个按钮，加上宽度可以超过 160px。除了第一个使用 css.

的按钮外，每个按钮都有一个 margin-left 设置为 10px

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

<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/

Answer 2

只需像这样更新您的 CSS，在 :first-child

之后的 css 中添加 tr

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

https://jsfiddle.net/kukL6k3z/2/

所以所有按钮都是左对齐的，并且两个按钮排成一排。

div 换行时如何去除边距？

How to remove a margin when a div go to a new line?

css

margin