Html 调整屏幕大小时，父div未包装子div

我正试图通过使用Codeacademy学习HTML/CSS和JavaScript+jQuery，并在自己的小项目中进行实践。但是，我遇到了一个非常简单的问题：

我希望在整个页面上显示父div。我可以成功地做到这一点（参见fiddler）。但是，当我调整浏览器屏幕的大小时；“我的父div”不再适合整个页面，这导致其最右边的子div显示在父div之外（请参见fiddler）。基本上，我希望我的父div始终包装它的子div，并始终显示在整个屏幕上

Fiddler链接：

相关HTML：

<div id="topnav">
            <a id="logo" class="navlink clearfix">DreamTeam</a>
            <a id="logo" class="navlink clearfix">Strikers</a>
            <a id="logo" class="navlink clearfix">Midfielders</a>
            <a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a>
            <a id="logo" class="navlink clearfix">Goalkeepers</a>
        </div>

---

任何帮助都将不胜感激。我已经浏览了很多谷歌搜索和其他stackoverflow帖子，但除非我完全错过了一篇合适的帖子，否则我似乎什么也做不到。使用诸如“overflow:hidden”或创建包装器div之类的东西对我来说并没有真正起作用。提前感谢您的建议。如果有人能给我指出一个我可能也错过的合适的帖子，那就太好了。

去掉标签中的div标签怎么样。因为您可以使用带有标记的类

请看StackOverflow用户提供的以下示例

CSS

HTML

---

我设法找到了解决问题的办法。问题不在于我的无效标记；它实际上是我的#topnav ID的CSS。下面是我如何更改该ID以获得我想要的结果：

#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}

---

关键更改位于height属性下方。

不是有效的标记。您不希望将块级元素（div）像a一样包装在内联级元素中。据我所知，没有float:top这样的东西。没有附加屏幕截图……在HTML5中（贴子上有标签），我相信在内联元素中可以使用block元素。我不推荐这样做。我真的很感谢@slash197的反馈，以后不会再犯这样的错误了。不幸的是，这并不是解决我问题的办法。

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div> 

#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}