0

尝试构建一个简单的登录屏幕，在桌面和手持设备上都“友好”。主登录部分应该只包含一个标签，右侧有一个文本框，Continue文本框下方有一个按钮。棘手的一点是，随着屏幕尺寸的减小，我希望看到每个换行。也就是说，如果它足够窄，每个控件都应该“堆叠”在另一个之上。

一个宽屏（抱歉图片粗糙）

输入登录：[ ]
                      |继续|

在窄屏幕上：

输入登录：
[ ]
 |继续|

我尝试了几种 div 组合，浮动到左侧，但我无法完全看清上面的内容。任何人都可以提供一些建议吗？

4

2 回答 2

0

人们讨厌桌子...但是尝试一下...

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <form action="index.html" method="get">
              First name: <input type="text" name="fname" /><br />
              Last name: <input type="text" name="lname" /><br />
              <input type="submit" value="Submit" />
            </form>
        </td>
    </tr>
</table>
于 2012-07-23T02:20:13.197 回答
0

您可以使用带有媒体查询的 CSS 网格来实现此目的。jsbin链接：https ://jsbin.com/retavuy/edit?html,css,output

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <main class="loginp-page">
        <h1 class="login-title">Login</h1>
        <form action="#" class="login-form"> 
            <label for="login">Enter login</label>
            <input type="text" id="login">

            <button type="submit" class="button">Continue</button>
        </form>
    </main>
</body>
</html>

CSS

main {
    padding-top: 1rem;
}

.login-title {
    text-align: center;
    font-size: 1.8rem;
    color: #ff5454;
}

.login-form {
    padding: 1rem;
    display: grid;
    grid-row-gap: 1rem;
    grid-auto-rows: 2rem;

}

.login-form label {
    font-weight: bold;
}

.login-form label,
.login-form input {
    display: block;
}

.login-form input:not([type="checkbox"]) {
    border: 1px solid #ccc;
    padding: 0.2rem 0.5rem;
    font: inherit;
}

.login-form input:focus,
.login-form select:focus {
    outline: none;
    background: #ece7e7;
    border-color: #2ddf5c;
}

.login-form button[type="submit"] {
    display: block;
}

@media (min-width: 40rem) {
    .login-form {
        margin: auto;
        width: 30rem;
        grid-template-columns: 10rem auto;        
    }

   .login-form button[type="submit"] {
       grid-column: 1 / 3;     
   }
}
于 2019-04-23T20:17:10.880 回答