css - 如何在的框外显示文字

Question

 <div class="signup">
    <div>Tenxian アカウントに必要な情報</div><br/>
    </div>
      <br/><br/><br/><br/><br/><br/>

     <div align="center">@2009 Tenxian      &nbsp;&nbsp;利用規約
    </div><br/>
    <div align="center"><a href="/en/bidding/index.php">Tenxian·English</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/cn/bid/index.php">腾闲·中国</a></div><br/><br/>

.signup 的代码是:

.signup {
    border: 1px solid #99CCFF;
    position: absolute;
    width: 700px;
    height:450px;
    left: 50px;
    right: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;

}

问题是

@2009 Tenxian 利用規約

Tenxian·English 腾闲·中国

显示在<div class="signup"></div>的方框内, 如何显示开箱即用 <div class="signup"></div> ？

我要展示

@2009 Tenxian 利用規約

Tenxian·English 腾闲·中国

在网页底部和 <div class="signup"></div> 框外.怎么做？

 <div style="position:relative"><div align="center" >@2009 Tenxian      &nbsp;&nbsp;利用規約
</div><br/>
<div align="center"><a href="/en/bidding/index.php">Tenxian·English</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/cn/bid/index.php">腾闲·中国</a></div><br/><br/>

</div>

不起作用。

Answer 1

问题是您的注册框设置为 position:absolute。执行此操作时，该元素将从页面流中删除。

最简单的解决方案就是不要让它成为position:absolute。 (如果这不可能，请修改您的问题，以便发布更有帮助的答案。)

您的原始代码，已简化

<div class="signup">
  <div>Tenxian アカウントに必要な情報</div>
</div>

<div class="footer">@2009 Tenxian 利用規約</div>
<div class="footer"><a href="/en/bidding/index.php">Tenxian·English</a> <a href="/cn/bid/index.php">腾闲·中国</a></div>

---

.footer {
  text-align: center;
}

---

请注意，我下面的解决方案不需要您使用此代码。它适用于您现有的 HTML 标记。我发布这段代码是为了让 future 的读者能够更轻松地理解标记。

可能的解决方案

.signup {
  border: 1px solid #99CCFF;
  width: 700px;
  height: 450px;
  margin-left: 50px;
  margin-right: auto;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
}

这会让您的注册框在页面流中占据适当的空间。以下是更改:

• 删除 position:absolute:这会使注册框显示为常规的静态定位框
• 将 left 和 right 改为 margin:当 block 级框静态显示时，它不受 top、left 等。相反，我们使用边距将框推到我们想要的位置。