HTML/CSS : How do I keep multiple divs inline horizontally in header?

Question

所以我正在处理一个网页，但我的页眉有问题。我制作的 header 有四个元素:

• 页眉背景。
• 网站标志(左上)
• 网站标题(居中)
• 网站申请门户的登录按钮

我的问题是一切都保持垂直对齐。我将把下面的屏幕截图链接到我为尝试解决下面这个问题而创建的临时页面。我似乎无法弄清楚。

我应该补充一点，我确实使用 float 让所有内容看起来都不错。通过让所有三个“内部”元素(除背景之外的所有元素)都 float ，它们可以正确排列。不幸的是，在调整页面大小时，效果很差。如果低于某个高度，组件就会错位。

这是我的 HTML/CSS 代码。任何帮助，将不胜感激。似乎无法弄清楚这一点。

.header{
  display: inline-block;
  text-align: center;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: bold;
  width: 100%;
  height: 80px;
  box-shadow: 0px 3px 5px gray;
}

/* Title Text in Header */
.header-title{
  text-shadow: 3px 3px 5px gray;
  margin-left: 60px;
}

/* Logo Div */
.logo{
  background-color: aqua;
  margin-top: 5px;
  margin-left: 10px;
  border: solid 1px gray;
  border-radius: 10px;
  box-shadow: 2px 2px 5px gray;
}

/* Div in Header for User Status/Login/Logout/Etc */
.user-status{
  margin-top: 5px;
  margin-right: 60px;
}

/* Header Style for welcome page */
.header-welcome{
  background-color: orange;
  color: black;
}

.btn-link{
  font-size: 15px;
  white-space: normal;
  width: 100px;
  margin-top: 10px;
  border: solid 1px gray;
  border-radius: 10%;
}

.btn-link:hover{
  border: solid 1px blue;
  border-radius: 10%;
  color: blue;
}

<div class="header header-welcome">
  <div class="logo">
    <img src="./img/ehslogo.png" height="70px"/>
  </div>
  <div class="header-title">
    <h1>Temp Title</h1>
  </div>

  <div class="user-status">
    <form method="get">
      <input class="btn-link" type="submit" 
             name="loginButton" 
             value="Login Button"/>
    </form>
  </div>
</div>

屏幕截图 - 您可以在此处看到垂直对齐的组件。我想要的是所有三个都水平安装在顶部的橙色栏内。 Logo 不应该像现在一样宽。

Answer 1

添加 css 规则 .header-welcome> div{display: inline-block;}

/* Header Style for welcome page */
.header-welcome{
  background-color: orange;
  color: black;
}
/*Rule add*/
.header-welcome> div{display: inline-block;}
/* Logo Div */
.logo{
  background-color: aqua;
  margin-top: 5px;
  margin-left: 10px;
  border: solid 1px gray;
  border-radius: 10px;
  box-shadow: 2px 2px 5px gray;
}

/* Div in Header for User Status/Login/Logout/Etc */
.user-status{
  margin-top: 5px;
  margin-right: 60px;
}


.btn-link{
  font-size: 15px;
  white-space: normal;
  width: 100px;
  margin-top: 10px;
  border: solid 1px gray;
  border-radius: 10%;
}

.btn-link:hover{
  border: solid 1px blue;
  border-radius: 10%;
  color: blue;
}

<div class="header header-welcome">
  <div class="logo">
    <img src="./img/ehslogo.png" height="70px"/>
  </div>
  <div class="header-title">
    <h1>Temp Title</h1>
  </div>

  <div class="user-status">
    <form method="get">
      <input class="btn-link" type="submit" 
             name="loginButton" 
             value="Login Button"/>
    </form>
  </div>
</div>