Question

我对网络开发还很陌生，所以如果这是一个＆＃34;新手＆＃34;我很抱歉问题，我已经浏览了各种网站，并尝试了各种各样的事情，但我无法将页面上的按钮移动到我想要的位置。

以下是我在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中尝试过很多不能正常工作的东西。我希望按钮位于＆＃34;今天加入以下几英寸处！＆＃34;文本，但它保持在它的位置，就像文本下面的头发，当我希望文本和按钮之间有空格。知道我做错了什么吗？我再次对这一切感到陌生，所以我感谢你的理解。谢谢。

Answer 1

您必须向display:inline-block;添加block或.btn-two，因为默认情况下锚元素为display:inlin，margin/padding无法影响em

检查下面的代码段

＆＃13;

.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;
}

＆＃13;

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>

＆＃13;

Answer 2

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

工作小提琴：https://jsfiddle.net/L210zqvf/

Answer 3

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

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

Answer 4

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

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

尝试在页面下方移动按钮

4 个答案: