导航按钮中的垂直黑条

Question

正在学习超基础的 HTML class 并且只需要提交这个项目，这样我就不会在 class 中挂科。在我简直丑陋的菜单上，除了 "Home" 之外，每个按钮的文本左侧都有一个垂直的黑条。谢谢你的帮助保持冷静 B）我的导航代码是：

<style>
    nav ul {list-style-type :none;
            margin : 0 25% 0 25%;}
    nav ul li {
            float : center;
    }
article {clear : left;}
nav ul li {
        float : left;
        margin-right : 1em;
        margin-bottom : 1em;
        text-align:center;
}
nav ul li a {
        text-align:center;
        padding : 0.25em .5em;
        text-decoration : bold;
        background-color : tan;
        color : black;
        border : 1px solid black;
        border-top-left-radius :  0em 0em;
        border-top-right-radius : 0em 0em;
}
</style>
</head>

<body>
    <header>
        <h1>Fish Stories</h1>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">Home</li>
            <li><a href="teenfishes.html">Teen Fisherman</li>
            <li><a href="alienfish.html">Alien Fish</li>
            <li><a href="talltale.html">Jean Sot</li></a>
        </ul>
    </nav>

Answer 1

更正您的 HTML 代码结构，如下所示。

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="teenfishes.html">Teen Fisherman</a></li>
    <li><a href="alienfish.html">Alien Fish</a></li>
    <li><a href="talltale.html">Jean Sot</a></li>
</ul>

导航按钮中的垂直黑条

Vertical black bars in nav buttons

html

nav