reactjs CSS -如何使导航栏链接活动的背景颜色比文本宽

qjp7pelc 于 2023-03-01 发布在 React

关注(0)|答案(4)|浏览(143)

我正在做一个CSS的导航栏，我已经得到了我想要的工作方式，但是活动状态显示的背景颜色与文本本身的宽度相同。我觉得这是基本的，但我已经搜索了几个小时，并没有找到任何答案。理想情况下，我希望背景颜色的宽度比文本本身的宽度大一点，当我在css中使用width属性时，它看起来像是硬编码了宽度，而没有注意到文本的宽度。
我用的是react和bootstrap。
它现在看起来像下面的图片。正如你所看到的背景颜色是相同的宽度与导航链接的文字“约”。

我怎样才能让它有一点喘息的空间，就像下面的图片一样？2在这个例子中，在文本的结尾和背景颜色之间有一个空间。
任何和所有的帮助/指导都是感激的。

下面是我的js导航项目：

import React from "react";
import "./NaviBar3.css";

function NaviBar3() {
  return (
    <div className="NaviBarDiv sticky-top">
      <nav className="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
        <a
          href="/"
          className="d-flex align-items-center mb-3 mx-5 me-md-auto text-light text-decoration-none"
          data-to-scrollspy-id="home"
        >
          <span className="fs-2">CM</span>
        </a>

        <a
          href="/"
          className="nav-link fs-5"
          data-to-scrollspy-id="about"
        >
          About
        </a>
        <a
          href="#projects"
          className="nav-link fs-5"
          data-to-scrollspy-id="projects"
        >
          Projects
        </a>
      </nav>
    </div>
  );
}

export default NaviBar3;

下面是我的CSS代码：

.NaviBarDiv {

  background-color: #282c34;
}
.active-scroll-spy {
  height: 4ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.nav-link {
  margin-left: 1em;
  margin-right: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

reactjs

来源：https://stackoverflow.com/questions/75577013/css-how-to-make-nav-bar-link-active-background-color-wider-than-the-text

4条答案

按热度按时间

j0pj023g1#

尝试使用到“填充”在css中

.nav-link {
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

赞(0）回复(0）举报 2023-03-01

nkkqxpd92#

只需向.active-scroll-spy类添加填充

.active-scroll-spy {
  height: 4ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding: 0.5em 1em; /* Adding padding to left and right sides */
}

赞(0）回复(0）举报 2023-03-01

b5buobof3#

@Mohammad Hasibul Hasan的回答让我想到了这个，虽然他的回答不起作用，但我开始用bootstrap摆弄填充物，这个成功了：

import React from "react";
import "./NaviBar3.css";

function NaviBar3() {
  return (
    <div className="NaviBarDiv sticky-top">
      {/* <nav className="d-flex flex-wrap justify-content-center border-bottom"> */}
      <nav className="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
        <a
          href="/"
          className="d-flex align-items-center mb-3 mx-5 me-md-auto text-light text-decoration-none"
          data-to-scrollspy-id="home"
        >
          <span className="fs-2">CM</span>
        </a>

        <a
          href="/"
          className="nav-link fs-5 px-3 pt-1"
          data-to-scrollspy-id="about"
        >
          About
        </a>
        <a
          href="#projects"
          className="nav-link fs-5 px-3 pt-1"
          data-to-scrollspy-id="projects"
        >
          Projects
        </a>
      </nav>
    </div>
  );
}

export default NaviBar3;

它现在看起来像这样：

赞(0）回复(0）举报 2023-03-01

qeeaahzv4#

您可以在活动链接上添加填充：

.active-scroll-spy {
  height: 4ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding: 1em;
}

或者甚至在classname中使用 Bootstrap 填充，如下所示：

className="d-flex active-scroll-spy p-4 align-items-center mb-3 mx-5 me-md-auto text-light text-decoration-none"

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs CSS -如何使导航栏链接活动的背景颜色比文本宽

4条答案

相关问题

热门标签

最新问答