0

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

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

提琴手链接：

相关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 之类的东西对我来说并不真正有用。提前感谢您的任何建议。如果有人能指出我可能错过的适当帖子，那就太好了。

4

2 回答 2

0

如何摆脱标签内的 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>

点击这里查看更多详情

于 2013-06-27T09:06:20.133 回答
0

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

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

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

于 2013-06-28T18:43:11.993 回答