时间戳

首页 > 解决方案 > 如何放大CSS按钮的可点击？

javascript - 如何放大CSS按钮的可点击？

问题描述

我在路线中使用了 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>

这是活动按钮的样子

这是它应该看起来的样子

标签： javascripthtmlcssreactjs

解决方案

移动className="tab-selections"到NavLink，并删除div包装NavLink（沙箱）：

<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;
}

推荐阅读