如何在引导程序中向表单左侧添加标题？

Question

我在页面顶部的导航栏中有一个表单.

这是HTML

<nav id ="topNav" class="navbar navbar-default">
<form class="navbar-form navbar-right navbar-input-group" role="search">
  <div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>
</nav>

这是表单的CSS

.navbar-input-group {
  font-size: 0px; 
  margin-right: 20px;

}

.navbar-input-group input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.navbar-input-group .btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 0px;
}

这就是它在浏览器上的样子

我想在表单左侧添加一些文本(标题h3)而不会发生这种情况

我刚在表单上方添加了一个h3元素......

<nav id ="topNav" class="navbar navbar-default">
    <h3>Text</h3>
<form class="navbar-form navbar-right navbar-input-group" role="search">

Answer 1

试试这个

.navbar h3, .navbar form{
display: inline-block;
}