html - 调整屏幕大小时，父 div 不包裹子 div

Question

我正在尝试通过使用 Codeacademy 并在我自己的小元素上练习来学习 HTML/CSS 和 JavaScript+jQuery。但是，我遇到了一个非常简单的问题:

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

fiddler 链接:

• > Link 1
• > Link 2

相关的 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>

相关 CSS:

/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}

#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}

#lastlink {
border: none;
}

/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto; 
font-size: 24px;
text-align: left;
line-height: 65px; 
width: 175px;
border-right: 1px solid #bdbdbd;
}

如有任何帮助，我们将不胜感激。我浏览了许多 Google 搜索和其他 stackoverflow 帖子，但似乎对我没有任何帮助，除非我完全错过了合适的帖子。使用诸如“溢出:隐藏”之类的东西或创建包装器 div 对我来说并没有真正起作用。预先感谢您的任何建议。如果有人能指出我可能也错过的适当帖子，那就太好了。

Answer 1

去掉标签内的 div 标签如何？因为您可以使用带有标签的类。

看下面这个 StackOverflow 用户提供的例子 starx

CSS

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

HTML

<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> 

Click here for more details