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

时间:2017-04-17 11:45:36

标签: html button hyperlink

我需要上学。我需要链接按钮并将其放在我的页面的右侧,但每次我将链接或按钮放在右边时它都不起作用。

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

enter image description here

3 个答案:

答案 0 :(得分:0)

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

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

让您理解HTML的结构 - 这也可能让您拥有与代码不同的结构。另外 - 我只放入图片中显示的文字,因此它不是一整行。

另请注意,我已将CSS应用于CSS部分中的元素而不是内联样式 - 这是更好的代码结构,因为它保持HTML和CSS分离。我还修改了一些样式(来自https://www.thoughtco.com/styling-links-with-css-3466838)以给链接一个像look一样的按钮。

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

答案 1 :(得分:0)

如果你把这个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>

答案 2 :(得分:-1)

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