如何放大CSS按钮的可点击？答案

【问题标题】：How to enlarge the clickable of CSS button?如何放大CSS按钮的可点击？
【发布时间】：2018-10-04 14:04:26
【问题描述】：

我在路线中使用了 NavLink，然后根据我想要的设计添加了一些填充和背景颜色等。然后为活动的 css 按钮添加了一个左边框样式，让用户很容易知道他们在哪里。但是由于某种原因，我无法使我的 css 按钮的边框/背景可点击，并且左边框仅位于文本旁边而不是背景。任何人都可以帮助我吗？

这是css：

.tab-selections {
    background-color: rgb(242, 242, 242);
    padding: 1.4em 6em;
    height: 1.7em;
    display: inline-block;
    margin: .3em;
    vertical-align: top;
    align-items: center;
    text-align: center;
    color: rgb(75, 75, 75);
    font-size: 15px;
}

.active {
    display: inline-block;
    background-color: rgb(205, 221, 255);
    border-left: .6em solid;
    border-left-color: rgb(87, 0, 255);
    text-align: center;
}

这是 HTML (ReactJS)：

<div className="article container">
      <div className="flex container parent">
        <div className="tab-selections">
          <NavLink
            to="/sample/article"
            style={{ color: '#4b4b4b', textDecoration: 'none' }}
          >
            ARTICLES
          </NavLink>
        </div>
        <div className="tab-selections">
          <NavLink
            to="/sample/casestudies"
            style={{ color: '#4b4b4b', textDecoration: 'none' }}
          >
            CASE STUDIES /<br />
            WHITEPAPERS
          </NavLink>
        </div>
        <div className="tab-selections">
          <NavLink
            to="/sample/news"
            style={{ color: '#4b4b4b', textDecoration: 'none' }}
          >
            NEWS/EVENTS
          </NavLink>
        </div>
      </div>

Here's what the active button looked like

Here's what it should looked like

【问题讨论】：

（旁白：我们喜欢这里简洁的问题，最好不要包含对答案的评论的答案。不要担心只能选择一个正确答案 - 选择一个您喜欢，并且您可以投票给其他任何人，尽管没有义务这样做。这是我们说“谢谢”的方式。

标签： javascript html css reactjs

【解决方案1】：

将className="tab-selections" 移动到NavLink，并删除包裹NavLink 的div (sandbox)：

<NavLink
  className="tab-selections"
  to="/sample/article"
  style={{ color: "#4b4b4b", textDecoration: "none" }}
>
  ARTICLES
</NavLink>

您还应该稍微改变一下样式，通过向.tab-selections 添加透明边框来防止文本跳跃，并在它处于活动状态时更改颜色：

.tab-selections {
  background-color: rgb(242, 242, 242);
  padding: 1.4em 6em;
  height: 1.7em;
  display: inline-block;
  margin: 0.3em;
  vertical-align: top;
  align-items: center;
  text-align: center;
  color: rgb(75, 75, 75);
  font-size: 15px;
  border-left: 0.6em solid;
  border-left-color: transparent;
}

.active {
  display: inline-block;
  background-color: rgb(205, 221, 255);
  border-left-color: rgb(87, 0, 255);
  text-align: center;
}

【讨论】：

这实际上让它变得更好了！

【解决方案2】：

在您的示例代码中，填充用于分隔 NAV-LINK 的容器，解决方案是将填充直接应用于构成“可点击表面”的 NAV-LINK

所以我会改变：

 style={{ color: '#4b4b4b', textDecoration: 'none' }}

到：

style={{ color: '#4b4b4b', textDecoration: 'none', padding:  '1.4em 6em'}}

但是考虑将它放在一个 css 类中以便更好地处理

【讨论】：

它实际上使背景可点击，但问题是它将不再处于 flex 之下。我之前试过放“NavLink { css properties.....}”，但没有用。
我明白，作为替代方案，您可以将填充留在导航链接的容器上，并在导航链接中添加一些“宽度：100％；高度：100％；”样式以强制它们覆盖容器中的所有可用空间，这样将保持 flex 行为

【解决方案3】：

在 CSS 方面，您需要将填充规则从 .tab-selections 移动到锚标记。您还需要将锚点显示为block。由于您使用的是<NavLink>，因此您可以添加到您的内联样式中：

padding: '1.4em 6em', display: 'block'

所以结果变成：

style={{ color: '#4b4b4b', textDecoration: 'none', padding: '1.4em 6em', display: 'block' }}

http://jsfiddle.net/b84nvcy0/

【讨论】：

那里没有引号。
@PraveenKumarPurushothaman 您需要为内联样式添加引号，就像 OP 所做的那样。
哦，好吧。我猜这是模板。哈！反应 JS。
这是一个接受 JS 对象的 React 属性。我们不要把头发分得太细。 :)
@isherwood，嗯？模板字面量（我认为这是 Praveen 的意思）与 JS 对象完全不同。