如何制作CSS邊框線

Question

如何為右邊框（帶有社交按鈕的左側部分）建立height屬性？ 我使用網格創建了此模態窗口。

這是我的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代碼。 我本來想向主要部分添加padding屬性，但這沒有任何意義。

    .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;
            }

        }
      }
    }

我曾經使用border屬性創建它，但是我需要使其更短（如圖所示）

Answer 1

您可以使用以下屬性在左右之間放置另一個div

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

Answer 2

將form標簽放在相對位置，並將form.form：form放在位置：絕對位置

  .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; } } } } form.form{ position: relative; } form.form:before { position: absolute; border-left: 1px solid #000; content: ""; margin-left: 49%; top: 0; bottom: 0; } 

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

Answer 3

將定位的偽元素添加到.main div

 .main { display: grid; grid-template-columns: 1fr 1fr; font-size: 14px; font-weight: bold; position: relative; margin: 1em auto; grid-column-gap: 1em; } .main::after { content: ""; position: absolute; top: 50%; left: 50%; height: 50%; /* adjust as required */ width: 2px; /* adjust as required */ transform: translate(-50%, -50%); background: red; } .main div { height: 75vh; background: lightblue; } 

 <div class="main"> <div></div> <div></div> </div>