Question

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

一个大屏幕（抱歉粗略的图片）

输入登录：[]
|继续|

在狭窄的屏幕上：

输入登录：
[]
|继续|

我已经尝试了几个div的组合，浮动到左边，但我不能完全看到上面的。有人可以提供一些建议吗？

Answer 1

人们讨厌表......但试试一个......

<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>

Answer 2

您可以将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;     
   }
}

如何用CSS包装div？

2 个答案: