Question

我正试图让标题从屏幕的一侧移动到另一侧，并像左侧一样停止，但它会延伸很多通道并离开屏幕。另外我认为当你设置一个特定的宽度，它从屏幕的边缘开始并停在屏幕的另一边。

body{
    background-color: white;
    width: 100%;
}

header{
    width: 100%;
    background-color: #0000CD;

}

nav{
    display: flex;
    justify-content: center;


}

ul.main-menu{
    display: flex;
    width: 100%;
    justify-content: space-around;
    list-style: none;
}

li.menu-item{



}




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Why OneDrive?</title>
    <link rel="stylesheet" href="../CSS/styles.css">
    <script src="../JS/3picslideshow.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
    <header>
        <nav>
            <ul class="main-menu">
                <li class="menu-item">Home</li>
                <li class="menu-item">Usage</li>
                <li class="menu-item">About</li>
                <li class="menu-item">Acknowledgments</li>
            </ul> 
        </nav>
    </header>


</body>
</html>

Answer 1

删除宽度：100％;来自身体课。你不需要它。这将解决您的问题。

Answer 2

body元素默认具有边距。通过添加

删除它

html, body {
  margin: 0;
}

..和100％宽的元素将完全适合宽度。例如：

＆＃13;

body {
  margin: 0;
}

.x {
  width: 100%;
  background: #fa0;
}

＆＃13;

<div class="x">The DIV with class "x"</div>

＆＃13;

Answer 3

尝试从width: 100%标记中删除body。它似乎工作。

示例here。

Answer 4

从身体上移除边距。

当宽度设置为100％并且左侧甚至没有到达屏幕边缘时，为什么标题的右侧会出现在屏幕的右侧？

4 个答案: