css - 响应式登录栏

标签 css html responsive-design responsive

我遇到了一个恼人的问题。我正在尝试让我的网络应用程序响应并且我几乎完成了，只剩下让登录栏响应，这对我来说是个大问题。我尝试了一些东西，但它们看起来又乱又丑。我不能让它看起来像我想要的那样，希望这里有人能帮忙。

我的代码:

.container {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

header {
  background-color: #262626;
  color: white;
  padding-top: 20px;
  min-height: 70px;
}

header a {
  letter-spacing: 1.5px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  padding: 8px 16px;
}

header a:hover {
  padding: 8px 16px;
  border-color: #2a2a2a;
  color: #D52B1E;
  letter-spacing: 1.5px;
  border: none;
  cursor: pointer;
  outline: none;
  display: block;
}

header li {
  padding: 0 15px 0 15px;
  display: inline-flex;
}

header #logo {
  float: left;
}

#logo a {
  color: white;
  display: block;
  font-family: 'Dancing Script', cursive;
  text-decoration: none;
  text-transform: none;
  font-size: 25px;
  font-weight: bold;
}

header nav {
  float: right;
  margin-top: 10px;
}

#login {
  text-align: center;
  margin-top: 30px;
  background-color: #f4f4f4;
  color: black;
  font-size: 12px;
  padding: 10px;
}

#login .container .wellcome-user-left {
  float: left;
  margin-top: 5px;
}

#login .container .logout-right {
  float: right;
  margin-top: 5px;
}

#login .container .login-info {
  float: center;
}

#login .container select {
  width: 10%;
  font-size: 12px;
  margin-left: 20px;
  border: none;
}

#login .container input[type="text"],
[type="password"] {
  width: 10%;
  font-size: 12px;
  transition: 0.6s;
  border: 1px solid #cacaca;
  background-color: white;
  transition: 0.2s;
  margin-left: 10px;
  margin-right: 10px;
  padding: 6px 16px;
}

#login .container input[type="text"],
[type="password"]:focus {
  outline: none;
}

#login .container button[type="submit"] {
  width: 6%;
  border: none;
  outline: none;
  background: transparent;
  color: rgb(0, 0, 0);
  cursor: pointer;
  transition: 0.2s;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 12px;
  margin-left: 25px;
}

#login .container button[type="submit"]:hover {
  background: #D52B1E;
  color: white;
}

#login .container .logout-btn {
  background-color: white;
  color: #262626;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 14px;
}

#login .container .logout-btn:hover {
  color: white;
  background-color: #262626;
}

@media(max-width: 736px) {
  header #logo,
  header nav,
  header nav li {
    float: none;
    text-align: center;
    width: 100%;
  }
  #login .container .login-info {
    float: right;
    font-size: 8px;
  }
  #login {
    float: center;
    text-align: center;
    margin-top: 20px;
    color: black;
    font-size: 10px;
  }
  #login .container .login-info button[type="submit"] {
    border: none;
    outline: none;
    background: transparent;
    color: rgb(0, 0, 0);
    cursor: pointer;
    transition: 0.2s;
  }
  #login .container .login-info button[type="submit"]:hover {
    background: #D52B1E;
    color: white;
  }
}
<section id="login">

  <div class="container" style="width:100%">
    <div class="wellcome-user-left">

      <ul>
        <li *ngIf="showLogin">Hello&nbsp;<b>{{username}} </b>, &nbsp;please log in</li>
      </ul>
      <ul>
        <li *ngIf="!showLogin">Wellcome&nbsp;<b>{{username}} </b>, &nbsp;enjoy</li>
      </ul>
    </div>

    <div class="logout-right" *ngIf="!showLogin">
      <button (click)="logout()" class="logout-btn"><i class="fas fa-sign-out-alt"></i>Logout</button>
    </div>
    <div class="login-info" *ngIf="showLogin">
      <i class="fas fa-user"></i> Username
      <input type="text" placeholder="enter username..." #username>

      <i class="fas fa-key"></i> Password
      <input type="password" placeholder="enter password..." #password>

      <select #cType>
        <option selected hidden>Select Client</option>
        <option>ADMIN</option>
        <option>COMPANY</option>
        <option>CUSTOMER</option>
      </select>

      <button type="submit" (click)="loginUser(username,password,cType)">LOGIN</button>
    </div>
  </div>

</section>

我的结果是这样的:

how it looks like

这就是我希望的样子:

how I wish it was

编辑后更新:(经过TsaiKoga帮助) update after @TsaiKoga help

最佳答案

我认为用户名、密码和选择字段需要嵌套在每个“div”中，然后您可以通过“div”显示内联或阻止响应或不响应来控制所有这些输入字段。

你可以试试这个(ps:你可以修改一些你需要的样式):

    .container {
      width: 85%;
      margin: auto;
      overflow: hidden;
    }

    header {
      background-color: #262626;
      color: white;
      padding-top: 20px;
      min-height: 70px;
    }

    header a {
      letter-spacing: 1.5px;
      color: white;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 16px;
      padding: 8px 16px;
    }

    header a:hover {
      padding: 8px 16px;
      border-color: #2a2a2a;
      color: #D52B1E;
      letter-spacing: 1.5px;
      border: none;
      cursor: pointer;
      outline: none;
      display: block;
    }

    header li {
      padding: 0 15px 0 15px;
      display: inline-flex;
    }

    header #logo {
      float: left;
    }

    #logo a {
      color: white;
      display: block;
      font-family: 'Dancing Script', cursive;
      text-decoration: none;
      text-transform: none;
      font-size: 25px;
      font-weight: bold;
    }

    header nav {
      float: right;
      margin-top: 10px;
    }

    #login {
      text-align: center;
      margin-top: 30px;
      background-color: #f4f4f4;
      color: black;
      font-size: 12px;
      padding: 10px;
    }

    #login .container .wellcome-user-left {
      float: left;
      margin-top: 5px;
    }

    #login .container .logout-right {
      float: right;
      margin-top: 5px;
    }

    #login .container .login-info {
      float: center;
    }

    #login .container select {
      width: 60%;
      font-size: 12px;
      margin-left: 20px;
      border: none;
    }
    #login .login-field-container {
      display: inline-block;
    }
    #login .login-field-container .login-field {
      display: inline-block;
    }
    #login .login-btn {
      display: inline-block;
    }

    #login .container input[type="text"],
    [type="password"] {
      width: 50%;
      font-size: 12px;
      transition: 0.6s;
      border: 1px solid #cacaca;
      background-color: white;
      transition: 0.2s;
      margin-left: 10px;
      margin-right: 10px;
      padding: 6px 16px;
    }

    #login .container input[type="text"],
    [type="password"]:focus {
      outline: none;
    }

    #login .container button[type="submit"] {
      width: 6%;
      border: none;
      outline: none;
      background: transparent;
      color: rgb(0, 0, 0);
      cursor: pointer;
      transition: 0.2s;
      padding: 6px 14px;
      font-weight: bold;
      font-size: 12px;
      margin-left: 25px;
    }

    #login .container button[type="submit"]:hover {
      background: #D52B1E;
      color: white;
    }

    #login .container .logout-btn {
      background-color: white;
      color: #262626;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 6px 14px;
    }

    #login .container .logout-btn:hover {
      color: white;
      background-color: #262626;
    }

    @media(max-width: 736px) {
      header #logo,
      header nav,
      header nav li {
        float: none;
        text-align: center;
        width: 100%;
      }
      #login .container .login-info {
        font-size: 8px;
        clear: both;
        display: -webkit-flex;
        display: flex;
        width: 100%;
      }
      #login {
        float: center;
        text-align: center;
        margin-top: 20px;
        color: black;
        font-size: 10px;
        text-align: left;
      }
      #login .login-field-container {
        height: 100%;
        width: 60%;
        text-align: right;
      }
      #login .login-field-container .login-field {
        display: block;
        margin-bottom: 8px;
      }
      #login .login-btn {
        vertical-align: middle;
        width: 30%;
        text-align: left;
      }
      #login .container select {
        margin-right: 10px;
      }
      #login .container .login-info button[type="submit"] {
        border: none;
        outline: none;
        background: transparent;
        color: rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.2s;
        width: 100%;
        height: 100%;
      }
      #login .container .login-info button[type="submit"]:hover {
        background: #D52B1E;
        color: white;
      }
    }
    <section id="login">

      <div class="container" style="width:100%">
        <div class="wellcome-user-left">

          <ul>
            <li *ngIf="showLogin">Hello&nbsp;<b>{{username}} </b>, &nbsp;please log in</li>
          </ul>
          <ul>
            <li *ngIf="!showLogin">Wellcome&nbsp;<b>{{username}} </b>, &nbsp;enjoy</li>
          </ul>
        </div>

        <div class="logout-right" *ngIf="!showLogin">
          <button (click)="logout()" class="logout-btn"><i class="fas fa-sign-out-alt"></i>Logout</button>
        </div>

        <div class="login-info" *ngIf="showLogin">

          <div class="login-field-container">
            <div class="login-field">
              <i class="fas fa-user"></i> Username
              <input type="text" placeholder="enter username..." #username>
            </div>

            <div class="login-field">
              <i class="fas fa-key"></i> Password
              <input type="password" placeholder="enter password..." #password>
            </div>

            <div class="login-field">
              <select #cType>
                <option selected hidden>Select Client</option>
                <option>ADMIN</option>
                <option>COMPANY</option>
                <option>CUSTOMER</option>
              </select>
            </div>
          </div>

          <div class="login-btn">
            <button type="submit" (click)="loginUser(username,password,cType)">LOGIN</button>
          </div>
        </div>
      </div>

    </section>

关于css - 响应式登录栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52508139/

上一篇：css - iphone 媒体查询在 Safari 中不起作用，在 Chrome 中正常

下一篇：html - Microsoft Explorer Edge 相同的框阴影，两种不同的结果

相关文章：

javascript - 不想页面跳转

html - z-index 没有将元素带到顶部

javascript - HTML/CSS/JavaScript 如何向内容添加超链接？

html - 为什么弹出窗口的某些部分被切断

css - CSS中的响应字体大小

javascript - 如何让 slider 在 JavaScript 中滑动时显示信息？

iphone - @font-face 在 iPhone 版本的 Safari 上已弃用。我有什么选择？

javascript - 避免javascript渐进增强导致的DOM元素闪烁？

javascript - 在悬停时更改 span/div 中的 SVG 图标的最简单方法？

html - 如何让这些社交图标在所有浏览器的页面上直接居中？

©2024 IT工具网  联系我们