html - 无法以 100% 宽度向右浮动导航栏

当我将下面的 UI 元素向右浮动时。宽度不再保持在整个页面上拉伸(stretch)的 100%。下面是我的 HTML 和 CSS 代码。

<!DOCTYPE html>
<html>
<head>
    <title>AI</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <div id="main-container">       
        <div id="image">
            <div id="nav-bar">
                <ul>
                    <li>Home</li>
                    <li>Team</li>
                    <li>About us</li>
                    <li>Contact us</li>
                </ul>           
            </div>
            <img src="D75_9070.jpg">
        </div>
    </div>
</body>
</html>

CSS

#main-container {
background-color: black;
position: fixed;
height: 100%;
width: 100%;
}

body {
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#nav-bar {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100%;
}

ul {
    margin: 10px;
    padding: 20px;
    background-color: white;

}

li {
    padding-left: 20px;
    padding-right: 20px;
    list-style: none;
    display: inline;
}

最佳答案

如果一个元素有 100% 的宽度，那么 float 它是没有意义的(大部分情况下是没有意义的)。

对于要拉伸(stretch)整个宽度的东西， float 它会使父容器折叠，但它不会对将内容移动到一侧或另一侧产生任何影响。

我认为您正在寻找的是这个。