Html 锚定标记在我的网页中工作不一致

下面是一段关于问题所在的实际视频记录（我不想以任何方式做广告）：

所以我只是为了练习而创建了一个网站，在遇到这个问题之前，一切都进展顺利。我有两个

菜单，其中顶部的主导航条将一个导航条引导至另一个页面，而第二个导航条将一个导航条引导至同一页面中的某个部分。但是第二导航栏有问题。下面是我使用的html：

<nav class="navbar">
        <div class="container">
            <ul>
                <li><a href="#drama">Drama</a></li>
                <li><a href="#comedy">Comedy</a></li>
                <li><a href="#romance">Romance</a></li>
                <li><a href="#action">Action</a></li>
            </ul>
        </div>
    </nav>

之后是一系列电影图片列表，但我仅以下面的输入2为例：

<div class="grid-picture">
    <!--First row of movies-->
        <div id="action">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt2911666/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg">
                    <h3>John Wick</h3>
                        <p>Action, Crime, Triller</p>
                </a>
            </div>
        </div>
<br>
        <!--1st row of romance movies-->
        <div id="romance">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
                <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
                    <h3>Love, Rosie</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>
       </div>
</div>

正如你所看到的，“John Wick”在一个ID为“action”的div标签中，而“Love，Rosie”在一个ID为“romance”的div标签中；它将页面精确地指向ID为“action”的电影所在的位置。然而，当我点击“浪漫”链接时，它不会把我带到网站的底部。相反，它会把我带到同一个地方，就像我点击了“动作”链接一样

因此，基本上，锚定标签对我不起作用，即使我确保输入href=“#roman”，并确保将电影“Love，Rosie”放在ID为“romance”的div标签中。外部链接工作得很好，只是内部链接不像我想象的那样工作。我还四次检查了是否有任何未关闭的div标签，但事实并非如此

---

PS：所有的电影都在同一页。

浪漫是否在你的页面底部？可能已经到达页面底部，浏览器无法向下滚动。是的，但不在最底部。因为我喜欢电影下面3-4行的电影，id是“浪漫”。你能给你的问题添加一个截图吗？当你试图达到浪漫主义时，只是为了表现你的行为，内容是否足够长？如果没有可滚动的位置，浏览器将无法滚动。另外：块元素（如

p

，

h1-h6

）不允许在内联元素内（如

a

，

span

）@JosephKim你没有使用多个“浪漫”ID吗？在你发布的剪辑中，动作似乎很有效。