html - 如何制作 CSS 边框线

Question

如何为右边框（带有社交按钮的左侧部分）建立高度属性？我使用网格创建了这个模态窗口。

这是我的html代码片段：

    <form class="form">
        <div class="head">
            <h1>Log in to the Site</h1>
            <a href="#"><i class="fas fa-times"></i></a>
         </div>
    <div class="main">
        <div class="left">
            <button class="facebook">
                <i class="fab fa-facebook-f"></i>
                Log in with Facebook
            </button>
            <button class="google">
                <i class="fab fa-google-plus-g"></i>
                Log in with Google +
            </button>
        </div>
        <div class="right">
           <span class="wrap">
                <label for="login"> Login</label>
                <input type="text" name="login" class="login">
            </span>
            <span class="wrap">
                <label for="password">Password  </label>
                <input type="password" name="password" class="password">
            </span>
            <br>
            <span class="check-box">
                <label for="checkbox">Remember me</label>
                <input type="checkbox" name="checkbox" class="checkbox" checked>
            </span>
            <div>
              <button class="log-btn">Log in</button>
              <a href="#">Need help logging in?</a>
            </div>
        </div>
    </div>
        <div class="footer">
            <p>Don't have an account yet? <a href="#">Sign up</a></p>
        </div>
  </form>

这是我的scss代码。我想将填充属性添加到主要部分，但它没有意义。

    .main {
        background: $light-grey-color;
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        font-size: 14px;
        font-weight: bold;

      .left {
        padding: 40px 58px;
        border-right: 1px solid $grey-color;

        .facebook {
            background: #3e5b96;
            margin-bottom: 20px;
            padding: 10px 45px 10px 50px;
        }
        .google {
            background: $red-color;
        }

        button {
            display: flex;
            font-weight: bold;
            display: inline-block;
            vertical-align: middle;
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 3px;
            white-space: nowrap;
            user-select: none;
            text-decoration: none;
            color: #fff;
            font-size: 14px;


            position: relative;
            padding: 10px 50px;

             i {
              position: absolute;
              left: 5px;
              top: 0;
              padding: 0 0 0 5px;
              height: 100%;
              box-sizing: border-box;


              display: flex;
              align-items: center;
        }
    }
    }
          .right {
        padding: 40px 58px;

       .wrap {
        display: block;
        margin-bottom: 20px;

         .login {
            width: 100%;
         }

         .password {
            width: 100%;
         }

         label {
            display: block;
            margin-bottom: 5px;
         }
       }
        .check-box {
            display:  inline-block;

            .checkbox {
                float: left;
            }
        }
        div {
            display: flex;
            margin-top: 24px;
            justify-content: space-between;
                    align-items: center;

            .log-btn {
                background: #252525;
                border: none;
                display: inline-block;
                vertical-align: middle;

                  white-space: nowrap;
                  user-select: none;
                  font-family: 'Open sans';

                  font-weight: bold;
                  text-decoration: none;
                  color: #fff;
                  padding: 14px 30px;
            }
            a {
                color: #000;
            }

        }
      }
    }

我曾经使用边框属性创建它，但我需要让它更短（如图所示）

标签： htmlcssresponsive-designborder

Answer 1

div您可以使用以下属性在左右之间放置另一个

.middle {
    background-color : #ccc;
    width : 2px;
    height : 150px;
    margin-top : 15px;
    display : inline-block;
}