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

在display block类中使.navigation-bar可以正常工作

Answer 2

我认为您不想使用display: inline，因为它将内联您的元素。在这种情况下，您肯定需要一个block元素以使其达到完整宽度。使用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用于.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设为块，并使用“ make”按钮向右浮动以向右移动

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>

HTML-div不会跨页面扩展

4 个答案: