如何在 <div> 块中垂直右移 <a> 标签？

Question

代码如下：

HTML

.a_btn_right{
        vertical-align: right;
    }

<div class="a_btn_right">
        <a class="btn" href= "" >Read More</a>
</div>

但是无法在 <div> 中制作垂直向右的 <a> 标签，知道如何实现吗？

Answer 1

vertical-align: right; 属性为

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

要制作文本 right，请尝试：

text-align: right;

或：

float: right;

Answer 2

CSS

.a_btn_right{
   width:100%;
}

.a_btn_right a{
   float:right;
}

Answer 3

将您的代码更改为：

<div class="a_btn_right">
    <a class="btn" href= "{{ site.url }}{{ post.url }}" >Read More</a>
</div>

和 css 到

.a_btn_right{
   border:2px solid #000;
   height:300px;
   width:300px;
   text-align:left;
}

您可以删除边框、高度和宽度；看这里：http://codepen.io/mhadaily/pen/OXGbYp

Answer 4

.a_btn_right{
   border:2px solid #000;
   height:300px;
   width:300px;
   text-align:left;
}
.a_btn_right a{
  float:right;
}


Try This

<div class="a_btn_right">
    <a class="btn" href= "#" >Read More</a>
</div>

Answer 5

你总是可以沿着 Flexbox 路线走下去，这也是开始添加到你的 CSS 的好东西。

您只需将 CSS 编辑为：

<style>
    .a_btn_right{
        display: flex;
        justify-content: flex-end;
    }
</style>

如果您担心它是否适用于所有浏览器，您可以查看此处作为参考：http://caniuse.com/#search=flexbox

这个网站也很适合仔细检查你想在你的网站上使用的任何类型的代码，但是，我坚信 Flexbox 是前进的方向。这也是将非响应式构建转变为响应式网站设计的好方法。

How to vertically right <a> tag in the <div> block?