顶部标题：减小输入宽度答案

【问题标题】：Top header: Reduce width of input顶部标题：减小输入宽度
【发布时间】：2019-10-09 21:59:34
【问题描述】：

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

如何将输入的宽度减小到 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>

【问题讨论】：

标签： html css twitter-bootstrap sass

【解决方案1】：

您可以减少 CSS 中 40% 的值。或者为 max-width 添加新的 CSS：

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

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

.float-right {
float:right;
}

但是你当前的职业法术是浮动而不是浮动，你应该改变它。

【讨论】：

【解决方案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>

【讨论】：