Question

我正在开发的网站有一个水平滚动条，我不知道为什么。

HTML

<body>
    <div id="header">
        <div id="logoHolder">
            Logo
        </div>
        <div id="loginHolder">
            Login
        </div>
        <div class="container_12">
            <div class="grid_12">
                <div id="navigationHolder">
                    <ul id="navigation">
                        <li><a href="#">GuidedChoice</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Investment Tools</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body {
}


/*Header*/
#logoHolder{
    width:20px;
    background-color:green;
    float:left;
}

#loginHolder{
    width:20px;
    background-color:green;
    float:right;
}

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

    }

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

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

我也使用960网格系统。

Answer 1

Example

是#loginHolder

你可以带走width:20px;或者给它一个margin-right:20px;然后就可以了。

Answer 2

你应该使用目前浏览器中内置的开发工具。 Firefox和Chrome都具有可通过按F11访问的功能。 firefox还有Firebug。

任何这些都会进入“检查元素”。模式，您可以将鼠标悬停在页面上并确定元素所在的位置以及它们的大小，即使它们充满了空白。

这些工具还允许您直接在原地实验性地编辑css，因此您可以找到一种更好的方式来按照您希望它们的工作方式设置元素的样式。

Chris Pederick的Web Developer Toolbar也被证明是一种有用的开发工具。

什么导致我的水平滚动条

2 个答案: