Question

希望我能正确地提出这个问题。

基本上，我试图在我的设计中实现下拉菜单。我一直在寻找帮助编码的帮助，因为我还是相对较新的HTML / CSS，并找到了一些很棒的教程，我已经改变了一点以符合我的想法。

我现在遇到的问题是，我不希望我的东西按比例缩放。当浏览器调整大小时，它会移动我的div按住我的下拉菜单。这不是我想要的设计。希望我写的描述可以帮助你识别我正在寻找的东西。

我已经读过你可以通过使用包装div来设置站点的分辨率来实现这一点。我尝试过这样做，但它破坏了我当前的代码，至少我尝试实现它的方式。

以下是我希望完成的显示示例：

以下是我的HTML和CSS项目的代码片段：

 HTML:
<!--Nav Wrapper-->
    <div class="wrapper">
    <ul class="nav">
        <li><a href="#">Final Cut</a>
            <!--Begin Main Div-->
            <div class="navMain">
                <!--Begin Sub Nav-->
                <div class="navLeft">
                    <span class="nav-titles">DBZ Final Cut: Navi</span><br><br><br>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a></div>
                    <br><br><span>This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
                </div>
                <!--End Sub Nav-->
    <li><a href="#">Articles</a></li>
    <li><a href="#">Sets</a></li>
    <li><a href="#">Resources</a></li>


    </ul> <!--End Nav List-->
    </div> <!--End of Nav Wrapper-->

CSS：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: Serif, sans-serif;
    background: white;
    font-size: 62.5%;
    color: black;
}

.wrapper {
    font-size: 1em;
    padding: 2em;
    margin: 0 auto;
    width: 80%;
    background-color: white;
}

.nav {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    border: 1px solid #002232;
}

.nav li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

.nav > li > a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
    text-transform:uppercase;
}

.nav > li:hover {
    left: -1px;
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
}

.nav > li:hover > div {
    left: -1px;
    display: block;
}

.nav > li > div {
    position: fixed;
    right: 0px;
    top: 87px;
    height: 300px;
    display: none;
    padding: 10px 10px;
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
    background:#F4F4F4;
    overflow: hidden;
}

.navMain {
    margin:-4px auto;
    position:fixed;
    text-align:left;
    border:1px solid #777777;
    border-top:none;
    width: 900px;

    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
}

.nav-titles {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    padding-right: 3px;
}

.navIcon {
    width: 15px;
    height: 15px;
}

.navDropLinks {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    display:block;
    padding-bottom: 6px;
}

.navDropLinks > a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.navLeft {
    position: absolute;
    left: 10px;
    width: 288px;
    display: inline-block;
    font-size: 11px;
    text-align: left;
    padding-right: 3px;
}

.navCenter {
    position: absolute;
    width: 280px;
    left: 313px;
    font-size: 11px;
    text-align: center;
}

.navRight {
    position: absolute;
    right: 10px;
    width: 280px;
    display: inline-block;
    font-size: 11px;
    text-align: center;
    padding-left: 3px;
}

.navImage {
    display: inline-block;
    width: 275px;
    height: 120px;
}

Answer 1

当它被修复时，它不会对父div做出反应。所以要修复它会使包装器固定，这样你就可以将它放在中心位置，你的内容将围绕父级包装进行调整。

我在你的包装器里面创建了一个新的包装器，并将其命名为navWrapper;

<div id="navWrapper">    
    <ul class="nav">
        <li><a href="#">Final Cut</a>
            <!--Begin Main Div-->
            <div class="navMain">
                <!--Begin Sub Nav-->
                <div class="navLeft">
                    <span class="nav-titles">DBZ Final Cut: Navi</span><br><br><br>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a></div>
                    <div class="navDropLinks"><img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a></div>
                    <br><br><span>This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
                    This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
                </div>
                <!--End Sub Nav-->
    <li><a href="#">Articles</a></li>
    <li><a href="#">Sets</a></li>
    <li><a href="#">Resources</a></li>


    </ul> <!--End Nav List-->

    </li>
    </ul>
        </div>
    </div>

然后将css添加到它，您可以在下面看到。

#navWrapper {
    width: 982px;
    position: fixed;
    top: 30px;
    left: 0px;
    right: 0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
}

如何使DIV元素固定但不可扩展？

1 个答案: