主页 / 问题 / 1372182
Accepted
dbUser11
Asked:2022-06-17 06:09:14 +0000 UTC2022-06-17 06:09:14 +0000 UTC

如何使弹性表单自适应？

  • 772

我正在尝试为弹性注册表单进行自适应设计。

我得到了一个有趣的stackoverflow的想法和其他一些东西，但我从来没有走到那一步。

问题的本质归结为我需要制作这样的布局： 在此处输入图像描述

我做了点什么。但我有一些问题。

  1. 我无法在 First name 和 Last name 字段之间设置填充（这很可能是因为我有flex: 1）。margin || padding出于同样的原因，我无法在帮助下设置缩进。
  2. 我无法使伪元素自适应（窄屏幕上“Register”一词附近的行覆盖文本）。

你能帮我提供一个真实的代码示例吗？我该如何解决这两个问题？我什么都不懂...

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    background: #F2F3F7;
}

a {
    text-decoration: none;
    color: green;
}

.wrapper-form {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-label {
    font-weight: bold;
    font-size: 40px;
    margin-bottom: 16px;
}

.main-text {
    font-size: 20.5px;
    margin: 22px 22px;
}

.register-form {
    display: flex;
    flex-direction: column;

    min-width: 40%;
}

.main-top {
    margin-top: 20px;
}

.main-input-container {
    display: inherit;
    flex-wrap: wrap;
}

.main-input {
    flex: 1;
    height: 65%;
    border-radius: 5px;
    padding: 15px;
    border-color: gainsboro;
}

.register-button {
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px;
    background: #55AD56;
    color: white;
    border-color: #55AD56;
}

.main-label-container {
    text-align: center;  
    width: 80%;          
    margin: 0 auto;      
    overflow: hidden;    
}

.main-label {
    position: relative;
}

.main-label::before {
    content: '';                     
    display: block;                  
    min-width: 17.5%;                   
    position: absolute;              
    border-bottom: 2px solid #D0D1D5;   
    top:50%;                         
    right: 24%;                    
}

.main-label::after {
    content: '';
    display: block;
    min-width: 17.5%;
    position: absolute;
    border-bottom: 2px solid #D0D1D5;
    top:50%;
    left: 24%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <title>Registration form</title>
</head>
<body>
    <main>
        <section class="wrapper-form">
            <div class="main-label-container">
                <h1 class="main-label">Register</h1>
            </div>
            <p class="main-text">Create your account. It's free and only takes a minute.</p>

            <form action="#" method="get" class="register-form">
                <section class="main-input-container">
                    <input type="text" name="name" class="main-input main-top" placeholder="First Name" required>
                    <input type="text" name="surname" class="main-input main-top" placeholder="Last Name" required>
                </section>
                <input type="email" name="email" class="main-input main-top" placeholder="Email" required>
                <input type="password" name="password" class="main-input main-top" placeholder="Password" required>
                <input type="password" class="main-input main-top" placeholder="Confirm Password" required>
                <label>
                    <input type="checkbox" name="accept" class="main-top" value="trueAccept">
                    I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a>.
                </label>
                <button type="submit" class="register-button main-top">Register Now</button>
            </form>
        </section>
    </main>
</body>
</html>

css

1 个回答

  1. Best Answer

    在主输入中添加边距

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    background: #F2F3F7;
}

a {
    text-decoration: none;
    color: green;
}

.wrapper-form {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-label {
    font-weight: bold;
    font-size: 40px;
    margin-bottom: 16px;
}

.main-text {
    font-size: 20.5px;
    margin: 22px 22px;
}

.register-form {
    display: flex;
    flex-direction: column;

    min-width: 40%;
}

.main-top {
    margin-top: 20px;
}

.main-input-container {
    display: inherit;
    flex-wrap: wrap;
}

.main-input {
    flex: 1;
    height: 65%;
    border-radius: 5px;
    padding: 15px;
    border-color: gainsboro;
        margin: 10px;
}

.register-button {
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px;
    background: #55AD56;
    color: white;
    border-color: #55AD56;
}

.main-label-container {
    text-align: center;  
   width: 320px;       
    margin: 0 auto;      
    overflow: hidden;    
}

.main-label {
    position: relative;
}

.main-label::before {
  content: '';
    display: flex;
    width: 17.5%;
    position: absolute;
    border-bottom: 2px solid #D0D1D5;
    top: 50%;
    left: 0;                  
}

.main-label::after {
content: '';
    display: flex;
    width: 17.5%;
    position: absolute;
    border-bottom: 2px solid #D0D1D5;
    top: 50%;
    right: 0;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <title>Registration form</title>
</head>
<body>
    <main>
        <section class="wrapper-form">
            <div class="main-label-container">
                <h1 class="main-label">Register</h1>
            </div>
            <p class="main-text">Create your account. It's free and only takes a minute.</p>

            <form action="#" method="get" class="register-form">
                <section class="main-input-container">
                    <input type="text" name="name" class="main-input main-top" placeholder="First Name" required>
                    <input type="text" name="surname" class="main-input main-top" placeholder="Last Name" required>
                </section>
                <input type="email" name="email" class="main-input main-top" placeholder="Email" required>
                <input type="password" name="password" class="main-input main-top" placeholder="Password" required>
                <input type="password" class="main-input main-top" placeholder="Confirm Password" required>
                <label>
                    <input type="checkbox" name="accept" class="main-top" value="trueAccept">
                    I accept the <a href="#">Terms of Use</a> & <a href="#">Privacy Policy</a>.
                </label>
                <button type="submit" class="register-button main-top">Register Now</button>
            </form>
        </section>
    </main>
</body>
</html>

    • 1

相关问题