1

我一直在尝试使用 Python 中的 django 框架从头开始制作一个网站。我正在尝试制作一个分屏登录页面，并且在每一侧，我想要三个按钮：阅读更多、注册、登录。

我希望“注册”按钮和“登录”按钮位于较大的“阅读更多”按钮下方，但我已经好几个小时都没有成功。我是Web开发的初学者，所以请原谅我的任何愚蠢错误。

“阅读更多”和“注册”按钮的代码（到目前为止）：

.button {
  display: block;
  position: relative;
  left: 50%;
  top: 40%;
  height: 2.5rem;
  padding-top: 1.3rem;
  width: 15rem;
  text-align: center;
  color: #fff;
  border: #fff solid 0.2rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
}
<div class="container">
  <div class="split left d-flex justify-content-center align-items-center">
    <h1> The Business </h1>
    <a href="#" class="button"> Read More </a>
    <div class="Buttons">
      <div class="SignUp">
        <a href="#" class="button"> Sign up </a>
      </div>
    </div>
  </div>
  <div class="split right d-flex justify-content-center align-items-center">
    <h1> The Artist </h1>
    <a href="#" class="button"> Read More</a>
  </div>
</div>

这是注册和阅读更多按钮当前显示在我的分屏一侧的方式（我还没有完成另一侧

编辑：这是我希望我的按钮看起来的方式

4

2 回答 2

0

我不认为你需要所有的职位。您唯一需要的是按钮的大小。Read More按钮应该被赋予更大的尺寸，而其他按钮应该被赋予更小的尺寸。然后您可以应用margin-left: auto并将margin-right: auto按钮放置在中心。

于 2020-11-02T02:32:28.090 回答
0

好吧，我对按钮的 CSS 和<div class="Buttons">. 这样，所有 3 个按钮都在同一个包装内，并且将按照您的图像建议显示。

我将block类型更改为inline-block. 当然还有其他方法，但这无需过多切换代码即可工作。我还删除了您的定位和变换，因为它们不是必需的。

接下来，我将您的链接类按钮交换为不同按钮的唯一类名称。我通过其父级处理样式并使用类名来设置宽度的样式。最后但并非最不重要的一点是，我添加了边距以获得按钮之间的一些间距。

h1 {
  text-align: center;
}

.Buttons {
  text-align: center;
}

.Buttons a {
  display: inline-block;
  height: 2.5rem;
  padding-top: 1.3rem;
  text-align: center;
  color: black;
  border: black solid 0.2rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}

.readMore {
  width: 30rem;
  margin-bottom: 10px;
}

.signUp,
.logIn {
  width: calc(15rem - 10px);
}

.signUp {
  margin-right: 10px;
}
<div class="container">
  <div class="split left d-flex justify-content-center align-items-center">
    <h1> The Business </h1>
    <div class="Buttons">
      <a href="#" class="readMore">Read More</a>
      <a href="#" class="signUp">Sign up</a>
      <a href="#" class="logIn">Log in</a>
    </div>
  </div>
  <div class="split right d-flex justify-content-center align-items-center">
    <h1> The Artist </h1>
    <div class="Buttons">
      <a href="#" class="readMore">Read More</a>
    </div>
  </div>
</div>

于 2020-11-02T03:35:19.093 回答