有没有办法让这个 div 可见？答案

【问题标题】：Is there a way to make this div visible?有没有办法让这个 div 可见？
【发布时间】：2022-02-03 17:15:11
【问题描述】：

现在我在页面上有一些导航栏。我已经添加了所有内容，但其中一个链接消失了。我只是看不到它。检查时，您可以在控制台上看到它，但它不在前台。

这里是代码

import React from "react";
import { GiHambugerMenu } from "react-icons/gi";
import { MdOutlineRestaurantMenu } from "react-icons/md";
import images from "../../constants/images";

import "./Navbar.css";

const Navbar = () => (
  <nav className="app__navbar">
   <div className="app__navbar-logo">
     <img src={images.gericht} alt="App  Logo" />
   </div>
  <ul className="app__navbar-links">
    <li className="p__opensans">
      <a href="#home">Home</a>
    </li>
    <li className="p__opensans">
    <a href="#about">About</a>
  </li>
  <li className="p__opensans">
    <a href="#menu">Menu</a>
  </li>
  <li className="p__opensans">
    <a href="#Awards">Awards</a>
  </li>
  <li className="p__opensans">
    <a href="#Contact">Contact</a>
  </li>
</ul>
<div className="app__navbar-login">
  <a href="#login" className="p__opensans">
    Log in / Register
  </a>
  <div />
  <a href="/" className="p_opensans">
    Book Table
  </a>
</div>
</nav>
);

export default Navbar;

和 CSS

.app__navbar-login a:hover {
   border-bottom: 1px solid var (--color-golden);
  }
.app__navbar-login div {
   width: 1px;
   height: 30px;
   background-color: var(--color-grey);
}

该栏显示除最后一个标记为 Book Table 之外的所有链接

请帮忙This is the screenshot of the navbar

【问题讨论】：

标签： css reactjs

【解决方案1】：

你有一个额外的结束 div

import React from "react";
import { GiHambugerMenu } from "react-icons/gi";
import { MdOutlineRestaurantMenu } from "react-icons/md";
import images from "../../constants/images";

import "./Navbar.css";

const Navbar = () => (
  <nav className="app__navbar">
   <div className="app__navbar-logo">
     <img src={images.gericht} alt="App  Logo" />
   </div>
  <ul className="app__navbar-links">
    <li className="p__opensans">
      <a href="#home">Home</a>
    </li>
    <li className="p__opensans">
    <a href="#about">About</a>
  </li>
  <li className="p__opensans">
    <a href="#menu">Menu</a>
  </li>
  <li className="p__opensans">
    <a href="#Awards">Awards</a>
  </li>
  <li className="p__opensans">
    <a href="#Contact">Contact</a>
  </li>
</ul>
<div className="app__navbar-login">
  <a href="#login" className="p__opensans">
    Log in / Register
  </a>
  <div /> <------------------------------------------------- HERE
  <a href="/" className="p_opensans">
    Book Table
  </a>
</div>
</nav>
);

export default Navbar;

【讨论】：