Question

我正在尝试添加与单词＆＃34;或＆＃34;对齐的水平线。在这个登录表单中，但我不能让它工作，因为它只会在单词下方对齐。 https://i.stack.imgur.com/12byj.png

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

以下是使用较少代码改进旧答案：

.content {
  margin: 10px auto;
  width: 200px;
}

.or {
  text-align: center;
  font-size: 20px;
  background-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
  background-size:40% 1px;
  background-position:center left,center right;
  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值和left以及元素之前的right

水平线 - 登录表单

1 个答案: