我面临一个令人讨厌的问题。我试图使我的Web应用程序具有响应性,但我几乎完成了,只剩下使登录栏响应了,这对我来说是个大问题。我尝试了一些东西,但看起来都很凌乱和丑陋。我无法让它看起来像我想要的样子,希望这里有人可以帮忙。
我的代码:
.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 <b>{{username}} </b>, please log in</li>
</ul>
<ul>
<li *ngIf="!showLogin">Wellcome <b>{{username}} </b>, 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>
我的结果是这样的
这就是我希望的样子:
编辑后更新:(在TsaiKoga帮助之后) update after @TsaiKoga help
答案 0 :(得分:0)
我认为用户名,密码和选择字段必须嵌套在每个“ 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 <b>{{username}} </b>, please log in</li>
</ul>
<ul>
<li *ngIf="!showLogin">Wellcome <b>{{username}} </b>, 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>