Question

#topnavbar {
            width:100%;
            padding:0;
            border:1px solid gray;
            margin:0; }

        #topnavbar p {
            margin:0; }

        body {
            margin-left:auto;
            margin-right:auto;
            margin-top:0;
            width:1024px; }

这是我的代码。如何让条形图（名为topnavbar）适合整个屏幕而不会溢出？我不想做overflow:hide;或其他什么。

Answer 1

你的意思是适合屏幕的整个宽度？

自相矛盾的是，您只需删除width:100%（边框正在添加到此值...）

编辑：是的，凯青也是对的 - 我错过了。如果你的身体宽度为1024，你的导航栏也将是1024 ......

Answer 2

你的css有点偏差：

#topnavbar {
   width:100%;
   padding:0;
   border:1px solid gray;
   margin:0; 
}

#topnavbar p {
   margin:0; 
}

#container{
    width:1024px;
    margin: 0 auto;
}

body {
   /* you do not need any of your css here */
}

HTML：

<body>
    <div id="topnavbar">
        <p>Some text</p>
    </div>
    <div id="container">
        whatever you want to center
    </div>
</body>

基本思路是将没有父级的元素宽度100％，然后在其下面应用定心容器。在这种情况下，＃container。

你的css正在向身体施加宽度，因此可能会弄乱整个布局。

如何在CSS中没有溢出的情况下使div适合屏幕

2 个答案: