Question

我希望4个子div的底部边框完全覆盖父级的底部边框。原因是父底部边框是“未单击”的轮廓，子div是“单击”选项卡的彩色底部边框。如何实现这种行为？

https://codesandbox.io/s/react-slick-playground-d5f1c?file=/Navbar.js

import React, { useState } from "react";
import Tab from "./Tab";
import { StyledTabs, NavbarOutline } from "./StyledNavbar";

const Navbar = ({ value, children, tabFilter, contentFilter }) => {
  const [activeTab, setActiveTab] = useState(value[0].title);

  const onClickTabItem = tab => {
    setActiveTab(tab);
  };

  return (
    <React.Fragment>
      <NavbarOutline>
        <ol>
          {value.map(child => {
            const { title } = child;
            return (
              <Tab
                activeTab={activeTab}
                key={title}
                title={title}
                handleClick={onClickTabItem}
              />
            );
          })}
        </ol>
      </NavbarOutline>
      <div>
        {value.map(child => {
          if (child.title !== activeTab) return undefined;
          return <StyledTabs className="content">{child.title}</StyledTabs>;
        })}
      </div>
    </React.Fragment>
  );
};

export default Navbar;

import styled from "styled-components";

export const NavbarOutline = styled.div`
  border-bottom: 2px solid #e3e3e3;
  margin: auto;
  width: 100%;
  white-space: nowrap;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
`;

export const StyledTabs = styled.button.attrs(props => ({
  className: props.className
}))`
  &.not-active {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    list-style: none;
    padding: 16px 31px 16px 31px;
    background: none;
    border: none;
    position: relative;
    bottom: -18px;
  }
  &.active {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    color: #2b8000;
    line-height: 20px;
    list-style: none;
    padding: 16px 31px 16px 31px;
    background: none;
    border: none;
    border-bottom: 2px solid #2b8000;
    position: relative;
    bottom: -18px;
  }
  &.content {
    list-style: none;
    background: none;
    border: none;
    float: left;
  }
`;

Answer 1

好像您只需要向width: 25%;添加button，向padding-inline-start: 0添加ol。

与G-Cyrillus达成共识，ol应该是nav元素。

完全覆盖父div的CSS div标签

1 个答案: