Question

我正在尝试学习基本的html＆amp; css，我正在创建一个带有导航栏的简单网页，但是当我修复我的标题时，它会超出页面的右侧。

<div ID="header">
    <table ID="navbar">
        <tr>
            <td>Home</td>
            <td>About</td>
        </tr>
    </table>
</div>


#header {
background-color: yellow;
position: fixed;
height: 35px;
width: 100%;
border-radius: 10px;
border: 2px solid red}

我该如何解决这个问题？感谢。

Answer 1

添加以下css：

#header{
    box-sizing: border-box;
    top: 0;
    left: 0;
}

box-sizing：border-box表示宽度（100％）将包含边框。否则，元素的宽度将是100％+ 4px - 并且比您的浏览器窗口宽

您可能也会因为默认保证金而感到厌烦。浏览器中的填充设置，所以我建议添加：

html, body{
    margin: 0;
    padding: 0;
}

如果你还没有完成这个

，那么在css文件的开头

Answer 2

您的Html文件正确但更改了Css文件。 CSS：

#header {background-color: yellow;position: fixed;height: 35px;width: 100%;border-radius: 10px;box-sizing: border-box;top: 0;left: 0;}

过去上面的css文件中的代码。

在这里，您可以看到工作Demo。☺

Answer 3

当您使用position:fixed时，您需要从左侧和顶部定义间距，如果您想要从左侧开始，请添加left:0; top:0;，或者如果您想将其居中，则添加left:0; right:0; top:0;

Answer 4

您需要为左右定义间距。

这里我做了一个小提琴：https://jsfiddle.net/yq6zoyhk/

#header {
background-color: yellow;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
height: 35px;
width: 100%;
border-radius: 10px;
border: 2px solid red}

固定的html div越过边缘

4 个答案: