删除可点击 Div 周围的空白

Question

我正在尝试创建一个可点击的div，但左侧和右侧有空白。

我尝试将其设为

inline-block

，但它所做的只是将按钮移至左侧。 我需要它保持居中。

其代码是：

<a href="google.com">
<div style="margin:auto;display:block;font-size:20px;font-weight:100;border-radius:8px;background-color: #34ac00;padding:16px;color:white;text-align:center;width:200px">Quit Drinking Now
</div>
</a>

如有任何澄清，我们将不胜感激。

Answer 1

实现您所寻求的最直接的方法是将块包装在弹性盒中

<div>

，如下所示：

<div style="display:flex;justify-content:center;">
  <a href="google.com">
    <div style="(omitted for the purpose of this example)">
      Quit Drinking Now
    </div>
  </a>
</div>

这将允许您拥有可点击的

<div>

，同时也无法点击它周围的空白。