水平線 - 登錄表

我想在此登錄表單中添加與單詞「或」對齊的水平線，但無法使其工作，因爲它只會在單詞下對齊。 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值和left之後的元素和right之前的元素

來源

2017-10-07 22:41:44

水平線 - 登錄表

回答

相關問題