有没有办法让这个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 />
<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 的链接外的所有链接

请帮忙这是导航条的屏幕截图

您有一个额外的结束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;

最新更新