Question

我在导航中使用了NavLink，然后根据我想要的设计添加了一些填充，背景颜色等。然后在活动的css按钮中添加左边框样式，以使用户轻松知道它们的位置。但是由于某种原因，我无法使css按钮的边框/背景可点击，并且border-left仅位于文本旁边，而不是背景。有人可以帮我吗？

这是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

Answer 1

将className="tab-selections"移动到NavLink，然后删除包裹div（sandbox）的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;
}

Answer 2

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/

Answer 3

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

所以我会改变：

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

收件人：

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

但是考虑将其放在CSS类中以获得更好的处理

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

3 个答案: