水平ライン - ログインフォーム

このログインフォームで単語「または」に揃えられた水平線を追加しようとしていますが、単語の下に揃うように動作させることはできません。 https://i.stack.imgur.com/12byj.png 水平ライン - ログインフォーム

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: 'Lato', Arial, sans-serif; 
 
} 
 

 
#loginForm { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 10px 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 
    <link rel="stylesheet" type="text/css" href="new 1.css"> 
 
</head> 
 

 
<body> 
 
    <form id="loginForm"> 
 
    <input type="text" class="login-username" placeholder="Username/E-mail" autofocus="true" required> 
 
    <input type="password" class="login-password" placeholder="Password" required> 
 
    <button type="submit" class="login-submit" name="submit">Login</button> 
 
    <a id="forgotPass" href="#" class="login-forgot-pass">Forgot password?</a> 
 
    <p>or</p> 
 
    <a id="Signup" href="signup.html">Register</a> 
 
    </form> 
 
</body> 
 

 
</html>

出典

2017-10-07 user7808079

あなたはこのような要素の前/後に試すことがあります。

.content { 
 
    margin: 10px auto; 
 
    width: 200px; 
 
} 
 

 
.or { 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 20px; 
 
} 
 

 
.or:after { 
 
    position: absolute; 
 
    content: " "; 
 
    bottom: 10px; 
 
    right: 0; 
 
    left: 60%; 
 
    height: 1px; 
 
    background: #000; 
 
} 
 

 
.or:before { 
 
    position: absolute; 
 
    content: " "; 
 
    bottom: 10px; 
 
    right: 60%; 
 
    left: 0; 
 
    height: 1px; 
 
    background: #000; 
 
}

<div class="content"> 
 
    <p class="or">or</p> 
 
</div>

があなたのページに適用されたスタイルに応じて、あなたには、いくつかを変更することができあなたが必要とするものを正確に得るための値。 bottomの値とafter要素のleftとbefore要素のrightを変更することができます

出典

2017-10-07 22:41:44

水平ライン - ログインフォーム

答えて

関連する問題