Question

你好我想在50px和50px两边用边距显示html内容。这是问题，我的导航条和它是100％然后它延伸到右端但正确定位在左侧
我已经给出了下面的图片：like this

我展示了html＆amp; CSS

的CSS：

<style>
            .top{
                width:100%;
                height:300px;
                color:#ccc;
                font-size: 40px;
                text-align: center;
                background-color: forestgreen;
            }
            .align{
                height:100%;
                margin-left: 50px;
                margin-right: 50px;
                background-color: darkgray;
            }
            ul{
                position: absolute;
                width:100%;
                list-style-type: none;
                overflow: hidden;
                background-color: black;
                color: azure;
                float:left;
                padding: 0;
            }
            nav{
                position: inherit;
            }
            li{
                text-decoration: none;
                padding: 14px 16px;

                display: block;
                float: left;
                margin: none;
                text-align: center;
            }
            li.active{
                background-color: darkred;
            }
            .navbar-fixed {
                  top: 0;
                  z-index: 100;
                  position: fixed;
                  width: 100%;
            }
        </style>

HTML：

<body class="bg-danger">
        <div class="align bg-success" >
            <div id=image-header class=top>
        NO:1 Hosting Site 
            </div>
        <nav   >
            <ul>
                <a href="index.php"><li class="active">
                    Home

                </li></a>

                <a href="login.php"><li>
                    Login
                </li></a>

                <a href="registration.php"><li>
                    Register
                    </li></a>

                <a href="account.php"><li >           
                    Profile
                </li></a>
            </ul>
            </nav>

            </div>
    </body>

我希望它像这样（我使用92.5％的宽度）修复它，宽度为100％this is just model like affix in bootstrap 并想知道为什么它不能用div元素100％修复图像

Answer 1

您可以在该导航栏上使用width: calc(100% - 100px);来获得正确的宽度。

导航栏宽度超出网页的视口

1 个答案: