css 删除按钮网格中的外部边距

w8rqjzmb 于 2023-02-26 发布在其他

关注(0)|答案(2)|浏览(105)

我有一组按钮，我在一个网格状的显示中流动，随着页面宽度的变化，按钮流动并重新排列以适应。
问题Grid of elements with no margin around the outside显示了我希望按钮和间距的外观，但我没有使用<grid>。
我确实知道，由于按钮是固定宽度的，所以在<div>中通常会有左右填充。然而，在一定的页面宽度下，<div>应该能够接触到按钮的侧面。
在我看来，最完美（也是最简单）的解决方案是使用<div style="padding:-7px;">，因为这样可以"吸收"外部边距，但是，似乎不允许使用负填充。

.qlink {
      border: none;
      background-color: #1F70C4;
      color: white;
      margin: 7px;
      height: 35px;
      width: 150px;
      font-size: 12px;
      display: inline-block;
      font-weight: bold;
    }
    .qlink:hover {background: #2484E9;}
    .qlink:active {background: #155292;}

<div style="text-align: center; border-style:solid; padding:0px;">
    <a href="https://google.com/1">
      <button class="qlink">Awards</button>
    </a>

    <a href="https://google.com/2">
      <button class="qlink">Directory</button>
    </a>

    <a href="https://google.com/3">
      <button class="qlink">Patent</button>
    </a>

    <a href="https://google.com/4">
      <button class="qlink">Calendar</button>
    </a>

    <a href="https://google.com/5">
      <button class="qlink">Leave Request Tool</button>
    </a>

    <a href="https://google.com/6">
      <button class="qlink">Publications</button>
    </a>
  </div>

现在看来

但我希望它看起来像

(As顺便说一句，这是它在BBEdit的预览中的呈现方式。有人知道为什么"破折号"会出现在水平行中吗？我认为它们实际上不是破折号。我认为它们是带下划线的空格。）

css

来源：https://stackoverflow.com/questions/75539721/remove-outside-margins-in-a-grid-of-buttons

2条答案

按热度按时间

vngu2lb81#

如果可能，使用css网格

.grid {
  text-align: center; 
  border-style:solid; 
  padding:0px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: center;
  gap: 7px;
}
.grid a button {
  border: none;
  background-color: #1F70C4;
  color: white;
  height: 35px;
  width: 150px;
  font-size: 12px;
  font-weight: bold;
}
.qlink:hover {background: #2484E9;}
.qlink:active {background: #155292;}

<div class="grid">
    <a href="https://google.com/1">
      <button class="qlink">Awards</button>
    </a>
    <a href="https://google.com/2">
      <button class="qlink">Directory</button>
    </a>

    <a href="https://google.com/3">
      <button class="qlink">Patent</button>
    </a>

    <a href="https://google.com/4">
      <button class="qlink">Calendar</button>
    </a>

    <a href="https://google.com/5">
      <button class="qlink">Leave Request Tool</button>
    </a>

    <a href="https://google.com/6">
      <button class="qlink">Publications</button>
    </a>
  </div>

赞(0）回复(0）举报 2023-02-26

pod7payv2#

破折号是由a标签的浏览器默认样式引起的。请参见下面我的基于flex-box的解决方案。

.wrapper {
  text-align: center;
  border-style: solid;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 7px;
  padding: -7px
}

.qlink {
  background-color: #1F70C4;
  color: white;
  // margin: 0 7px 7px 0;
  height: 35px;
  font-size: 12px;
  display: inline-block;
  font-weight: bold;
  flex: 1 1 150px;
  text-decoration: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.qlink:last-of-type {
  margin-bottom: 0
}

.qlink:hover {
  background: #2484E9;
}

.qlink:active {
  background: #155292;
}

<div class="wrapper">
  <a href="https://google.com/1" class="qlink">
      Awards
    </a>

  <a href="https://google.com/2" class="qlink">
      Directory
    </a>

  <a href="https://google.com/3" class="qlink">
      Patent
    </a>

  <a href="https://google.com/4" class="qlink">
      Calendar
    </a>

  <a href="https://google.com/5" class="qlink">
      Leave Request Tool
    </a>

  <a href="https://google.com/6" class="qlink">
      Publications
    </a>
</div>

赞(0）回复(0）举报 2023-02-26

我来回答

css 删除按钮网格中的外部边距

2条答案

相关问题

热门标签

最新问答