试图将按钮移到页面下方

Question

我是网络开发的新手，所以如果这是一个 "newbie" 问题，我深表歉意，我查看了各种网站并尝试了各种方法，但无法将我页面上的按钮移动到我要它去。

这是我在 HTML 中的代码：

 <div class="crown">
        <div class="container">
          <img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
             <h3><strong>Join today!</strong></h3>
              <p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
          </div>
        </div>


    <section class="footer">
      <div class="container">
          <p>&copy; 2016</p>
        </div>
      </div>

    </body>
  </html>

这里是 CSS：

.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}

我在 CSS 中尝试了很多方法都不起作用。我希望按钮位于 "Join today!" 文本下方几英寸处，但它停留在原处，就像文本下方的头发一样，而我希望文本和按钮之间有 space。知道我做错了什么吗？再一次，我对这一切都是陌生的，所以我感谢你的理解。谢谢。

Answer 1

您必须将 display:inline-block; 或 block 添加到 .btn-two，因为锚元素默认为 display:inline 而 margin/padding 不会影响 em

检查下面的代码片段

.btn-two {
  border: 1px solid black;
  padding: 20px;
  text-decoration: none;
  background-color: black;
  color: white;
  text-align: center;
  margin: 60px 0 0 0;
  display: inline-block;
}

I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:

<div class="crown">
  <div class="container">
    <img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
    <h3><strong>Join today!</strong></h3>
    <p style="text-align: center;"><a class="btn-two" href="#">Register</a>
    </p>
  </div>
</div>


<section class="footer">
  <div class="container">
    <p>&copy; 2016</p>
  </div>
  </div>

Answer 2

您还可以从包含该按钮的 <p> 中删除 text-align:center; 样式。

工作fiddle：https://jsfiddle.net/L210zqvf/

Answer 3

将 display: inline-block; 应用于您的 .btn-two。 <a> 标签是内联元素，通常不接受宽度、高度、边距等，只要您不执行上述操作即可。

是的，如果您不希望它居中，请从您的 <p> 标签中删除 style="text-align: center;"。

Answer 4

锚 a 元素在浏览器中默认为 display:inline。行内元素不能有边距或填充，顶部或底部。您只能在元素的左侧或右侧应用边距和填充。

在你的情况下。我会在包含的段落元素上放置一个 class 并在其顶部添加边距。段落元素是块级元素。

试图将按钮移到页面下方

Trying to move a button further down the page

html

css