我想链接按钮并将其放在右侧

Question

我需要做功课。我需要链接按钮并将其放在页面的右侧，但每次我将链接或按钮放在右侧时它都不起作用。

我应该放置什么 html 代码以及按什么顺序在右侧有按钮并链接到它。照片上就是我现在拥有的。

Answer 1

这是一件简单的事情 - 如上所述 - 你需要将它浮动到右边......但是如果你正在浮动一些东西 - 这将对下一个元素产生影响 - 所以你还需要清除浮动.

要考虑的另一件事是 - p 元素是块级元素 - 因此将占据整行 - 而 a 元素是内联级元素 - 意味着它不会。这就是为什么这样做会导致按钮位于 p 的上一行 - 它位于下一行。你可以改变它 - 但它需要计划一下。

只是为了让您了解 HTML 的结构 - 这也可以让您拥有与代码不同的结构。另外 - 我只输入了图像中显示的文本，所以它不是一整行。

另外请注意，我已将 CSS 应用于 CSS 部分中的元素，而不是内联样式 - 这是更好的代码结构，因为它将 HTML 和 CSS 分开。我还修改了一些样式（来自https://www.thoughtco.com/styling-links-with-css-3466838），为链接提供了类似外观的按钮。

.button{
  float:right;
  border-style: solid;
  border-width : 1px 4px 4px 1px;
  text-decoration : none;
  padding : 4px;
  color:black;
  border-color : #69f #00f #00f #69f;
 }

.button:hover {
  border-color: black;
  color:  #00f ;
}

p{
  clear:both
}

<a class="button" href="2.html">Next</a>
<p>The most important reason of why you should remain heal</p>

Answer 2

如果你把这个html代码元素放在：

<button><a href="http://stackoverflow.com/questions/43450852/i-want-to-link-button-and-put-it-to-the-right/43451382#">this page</a>

你会得到这个：

<button><a href="http://stackoverflow.com/questions/43450852/i-want-to-link-button-and-put-it-to-the-right/43451382#">this page</a>
</button>

这对你的CSS：

button {
float: right;
}

最后你会得到：

<style>button {
    float: right;
    }
    </style>
<button><a href="http://stackoverflow.com/questions/43450852/i-want-to-link-button-and-put-it-to-the-right/43451382#">this page</a>
    </button>

Answer 3

您必须添加一点 CSS。 <button style="float:right;">