Question

我正在使用960网格系统开发网站。

标题中有3个部分。徽标，导航和登录表单。

当页面低于1614像素时，我将媒体查询设置为将徽标和登录集中在一起。问题是，当徽标居中时，包含登录的div不会。

这是一个屏幕截图，在div周围突出显示以显示问题。

Webpage

这是一个未成年人的小提琴

http://jsfiddle.net/6m8K7/

我不确定是什么原因造成的。

HTML

<div id="header">
    <div id="logoHolder">
        <a href="index.html">
            <img src="images/Pinnacle_ira logo_web.png" alt="Pinnacle IRA" width="125" height="84"/>
        </a>
    </div>
    <div id="loginHolder">
        <form action="https://www.theiracenter.com/customerLoginAction.gsx" method="post" >
            <label for="username">Username:</label>
            <input class="topLogin" type="text" name="login" />
            <br />
            <label for="password">Password:</label>
            <input class="topLogin" id="passwordText" type="password" name="password" />
            <input type="hidden" name="pd" value="C05" />
            <br />
            <input type="submit" />
        </form>
    </div>
    <br />
    <div class="container_12">
        <div class="grid_12">
            <div id="navigationHolder">
                <ul id="navigation">
                    <li><a href="guidedChoice.html">GuidedChoice</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="faq.html">FAQs</a></li>
                    <li><a href="investment.html">Investment Tools</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

CSS

/*Header*/
#logoHolder{
    float:left;
}
    #logoHolder img{
        margin:5px;
        margin-top:20px;
        vertical-align:bottom;
    }

    @media (min-width:0px) and (max-width:1614px){
        #logoHolder{
            width:125px;
            float:none;
            display:block;
            margin-left:auto;
            margin-right:auto;
        }
    }


#loginHolder{
    float:right;
}

    @media (min-width:0px) and (max-width:1614px){
        #loginHolder{
            display:block;
            margin-left:auto;
            margin-right:auto;
        }
    }

label{
    font-family:Arial;
}

.topLogin{
    width:175px !important;
    height:20px !important;
}
    #passwordText{
        margin-left:22px;
    }

#navigationHolder{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:775px;
    background-color:brown;
    height:auto;
}

/*Navigation*/
#navigation{
    list-style:none;
    font-family:Arial;
    font-size:1.3em;
}

    #navigation li{
        float:left;
        display:block;
        color:#888888;
        margin-top:20px;
    }

    #navigation li:hover{
        color:white;
    }

    #navigation li a{
        color:inherit;
        text-decoration:none;
        display:block;
        text-align:center;

        padding:1.25em;
        padding-bottom:3.5em;
    }

    #navigation li a:hover{
        background:#609941;
        text-decoration:underline;
    }

Answer 1

你有两个减速的特殊原因吗？

@media (min-width:0px) and (max-width:1614px){

无论哪种方式，只需将float:none添加到#loginHolder选择器即可。 - 这需要放在同一断点的第二次减速中。

960 Grid容器创建标题空间

1 个答案: