Question

我将此网格用作顶部导航栏，我想进行一些更改：

如何将输入的宽度减小到40％，但仍保持在徽标旁边？以及如何在右上角添加登录div。但是请记住，我希望整个标题像现在一样保持响应状态。如果执行以下操作，则在全屏中看起来不错，但是当屏幕的宽度较小时，输入将变得很小。

.top_nav_menu {
  border-bottom: 1px solid #e3e3e3;
  box-shadow: 0 0 8px 0 #eeeeee;
  position: fixed;
  top: 0px;
  width: 100%;
  height: auto;
  background-color: #fafafa;
  margin-right: 90px;
  padding: 15px;
  z-index: 2;
}


.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
}

.header > form {
  width: 65%;
  margin-left: 25px;
}

.header > form > input {
  width: 40%;
}

<div class="top_nav_menu">
  <div class="header">
    <img src="http://i.imgur.com/EFkps0m.png">
    <form><input type="text"></form>
    <div class="floar-right">Sign-in</div
  </div>
</div>

Answer 1

您可以在CSS中减小40%的值。或添加最大宽度的新CSS：

.header > form > input {
    max-width: 50px;
}

对于登录div，您可以添加以下CSS：

.float-right {
float:right;
}

但是，当前班级的学生说的是floar而不是float，您应该更改它。

Answer 2

您可以使用此代码

        body {
            margin: 0;
            padding: 0;
        } 
        .top_nav_menu {
            border-bottom: 1px solid #e3e3e3;
            box-shadow: 0 0 8px 0 #eeeeee;
            position: fixed;
            top: 0px;
            width: 100%;
            height: auto;
            background-color: #fafafa;
            margin-right: 90px;
            padding: 15px;
            z-index: 2;
        }
        .header {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 50px;
        }
        .header > form {
            width: 65%;
            margin-left: 25px;
        }
        .header > form > input {
            width: 24%;
        }

    <div class="top_nav_menu">
        <div class="header">
            <img src="http://i.imgur.com/EFkps0m.png">
            <form><input type="text"></form>
            <div class="floar-right">Sign-in</div>
        </div>
    </div>

顶部标题：减小输入宽度

2 个答案: