HTML - div不会跨页面扩展

Question

我正在尝试制作一个延伸到整个页面的栏，但我无法实现这一点。 我尝试了多种东西，比如position: relative; 和margin: 0; 但没有工作。 这是我现在在CSS中的内容：

 html, body { padding: 0; margin: 0; width: 100%; height: 100%; } .navigation-bar { font-size: 46px; font-family: "Roboto", sans-serif; display: inline; background-color: #F4F4F4; margin: 0; width: 100vw; } .navigation-bar-button { display: inline; border-radius: 5px; border: 1px solid black; font-size: 30px; vertical-align: middle; background-color: #D8D8D8; } .navigation-bar-title-text { display: inline; } 

  <body> <div class="navigation-bar"> <div class="navigation-bar-title-text"><font color="#444444">my</font><font color="#ADADAD">phys</font><font color="#DDDDDD">ed</font></div> <button type="button" class="navigation-bar-button">Home</button> <hr width="100%" style="margin: 0; padding: 0"> </div> </body> 

但背景颜色仍然不会在屏幕的末尾。 知道怎么解决？

Answer 1

在.navigation-bar类中创建display block它将起作用

Answer 2

我认为你不想使用display: inline因为它会内联你的元素。 在这种情况下，你肯定需要一个块元素来使它达到整个宽度。 使用display: flex下面的代码段：

 I'm trying to make a bar that extends across the entire page, but I can't get that working. I've tried multiple things like position: relative; and margin: 0; but none work. Here is what I have now in the CSS: html, body { padding: 0; margin: 0; width: 100%; height: 100%; } .navigation-bar { font-size: 46px; font-family: "Roboto", sans-serif; display: flex; justify-content: space-between; background-color: #F4F4F4; margin: 0; width: 100vw; } .navigation-bar-button { display: inline; border-radius: 5px; border: 1px solid black; font-size: 30px; vertical-align: middle; background-color: #D8D8D8; } .navigation-bar-title-text { display: inline; } 

  <body> <div class="navigation-bar"> <div class="navigation-bar-title-text"><font color="#444444">my</font><font color="#ADADAD">phys</font><font color="#DDDDDD">ed</font></div> <button type="button" class="navigation-bar-button">Home</button> </div> </body> 

您可以使用justify-content来定位元素。

Answer 3

使用display:block for .navigation-bar

 html, body { padding: 0; margin: 0; width: 100%; height: 100%; } .navigation-bar { font-size: 46px; font-family: "Roboto", sans-serif; display: block; background-color: #F4F4F4; margin: 0; width: 100vw; } .navigation-bar-button { display: inline; border-radius: 5px; border: 1px solid black; font-size: 30px; vertical-align: middle; background-color: #D8D8D8; } .navigation-bar-title-text { display: inline; } 

  <body> <div class="navigation-bar"> <div class="navigation-bar-title-text"><font color="#444444">my</font><font color="#ADADAD">phys</font><font color="#DDDDDD">ed</font></div> <button type="button" class="navigation-bar-button">Home</button> <hr width="100%" style="margin: 0; padding: 0"> </div> </body> 

Answer 4

您可以将navigation-bar设为块，并使按钮向右浮动以向右移动

 html, body { padding: 0; margin: 0; width: 100%; height: 100%; } .navigation-bar { font-size: 46px; font-family: "Roboto", sans-serif; display:block; background-color: #F4F4F4; margin: 0; width: 100vw; } .navigation-bar-button { display: inline-block; border-radius: 5px; border: 1px solid black; font-size: 30px; vertical-align: middle; background-color: #D8D8D8; float:right; margin:5px; } .navigation-bar-title-text { display: inline; } 

 <body> <div class="navigation-bar"> <div class="navigation-bar-title-text"><font color="#444444">my</font><font color="#ADADAD">phys</font><font color="#DDDDDD">ed</font></div> <button type="button" class="navigation-bar-button">Home</button> <hr width="100%" style="margin: 0; padding: 0"> </div> </body>