中断时删除元素之间的边距

编程问答 2022-06-14

问题描述

我在这样的按钮之间留有余量：

.button + .button {
  margin-left: 1rem;
}

按钮位于<div class="row">内部，将以较小的屏幕尺寸环绕：

enter image description here

是否可以删除第二行的边距？

解决方法

您可以使用以下CSS。

.button {
    margin-left: 0.5rem;
    margin-right:0.5rem
}
,

我相信您想做的就是将第二行一直向左对齐。当发现屏幕尺寸变化并且在不同的行上有不同的按钮时，这可能很难处理。但是，如果将显示设置为flex则很容易-完全不必担心页边距。

看看这个：

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

button {
  padding: 10px 35px;
}
<body>
  <div class="buttons">
    <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>
  </div>
</body>

尝试缩小屏幕，看看按钮如何保持对齐。这就是display: flex的目的。您要做的只是拥有一个您设置为div的容器（在此示例中为display: flex）。如果要溢流换行到下一行，请将flex-wrap设置为wrap（如果未设置，则flex显示器将尝试缩小所有按钮和内容的宽度将它们放在一行上）。然后，您可以设置所需的任何gap值并使用它完成。

如果您不想使用flex，则可以将左右边距设置为相等的值，而不仅仅是将左边距设置为：margin: 0.5rem会将所有四个边距设置为0.5rem，并且所有行向上。问题是当您要使按钮与容器侧面齐平时。如果您愿意，那么flex是最简单的方法。否则，您必须对容器使用负边距。它们有其自身的问题，特别是如果您的容器带有边框。

,

您可以使按钮的右边距（margin-right：1rem）而不是左边距，以通过在之后而不是之前留出间距来确保间距保持不变，但这将有助于消除按钮上的间距。新行。

,

不太清楚您的html是什么样，但是尝试通过媒体查询来定位它们

@media only screen and (min-width:from screen width with issue in px) and (max-width:to screen width with issue in px) 
for example- 
@media only screen and (min-width:768px) and (max-width:1024px)
{
 .button + .button:nth-child(4){
  margin-left: 0px;
}

}
,

父级边距相同但为负：

section {
  border: 1px solid #f00;
  width: 300px;
  margin: auto;
}
div {
  font-size: 0;
  margin-left: -1rem;
}
button {
  margin-left: 1rem;
  font-size: 16px;
}
<section>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</section>

margin