Question

尝试使用“ display：block”同时将高度，宽度和行高更改为我的偏好，但事实是，尽管确实扩大了可点击区域并可以正常工作，但是它将弄乱具有“”的csss按钮的对齐方式没有“ br />”的css按钮上的字符。另一方面，使用“ display：flex”（当前正在使用）可以使文本格式保持固定，即使存在“”，但clickable也仅在文本内。

因此，我正在寻找一种解决方案，以使文本与没有文本的文本保持一致，并且使可点击的大小增加到我喜欢的水平。

这是CSS：

.flex.container.parent {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    vertical-align: middle;
    position: relative;
}

.tab-selections {
    background-color: rgb(242, 242, 242);
    padding: 20px 100px;
    height: 30px;
    margin: 4px;
    display: flex;
    align-items: center;
    text-align: center;
    color: rgb(75, 75, 75);
}

.tab-selections:hover {
    background-color: rgb(205, 221, 255);
    color: rgb(75, 75, 75);
}

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

这是HTML（ReactJS）：

  <BrowserRouter>
    <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>
      <div className="content">
        <Route exact path="/sample/article" component={ArticleContent} />
        <Route path="/sample/casestudies" component={CaseStudies} />
        <Route path="/sample/news" component={News} />
      </div>
    </div>

Here is what it looked like if I used flex

无法放大CSS按钮的可点击大小

0 个答案: