我试图在此登录表单中添加一条与“或”一词对齐的水平线，但是我无法使其工作，因为它只会在该词下方对齐。 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>这是使用更少代码对旧答案的改进：
.content {
margin: 10px auto;
width: 200px;
}
.or {
text-align: center;
font-size: 20px;
background:
linear-gradient(#000 0 0) left,
linear-gradient(#000 0 0) right;
background-size: 40% 1px;
background-repeat: no-repeat;
}<div class="content">
<p class="or">or</p>
</div>旧答案
您可以尝试在元素之前/之后像这样：
.content {
margin: 10px auto;
width: 200px;
}
.or {
position: relative;
text-align: center;
font-size: 20px;
}
.or:before,
.or:after {
position: absolute;
content: " ";
bottom: 10px;
width: 40%;
height: 1px;
background: #000;
}
.or:after {
right: 0;
}
.or:before {
left: 0;
}<div class="content">
<p class="or">or</p>
</div>根据应用于页面的样式，您可以更改一些值以获得您所需要的。您可以更改后元素和前元素的bottom值leftright