显示按钮右下方对齐

Question

我有一个文字段落和一个按钮。 我想在文本下方右对齐显示按钮，但我无法使其正常工作。

目前的情况如下：

如何在没有浮动的情况下执行此操作（如果我设置float: right，则它位于其下方的元素中）

Answer 1

这可以宽inline-block + transform。

<强> JsFiddle

a {
    display: inline-block;
    background: yellow;
    padding: 5px 10px;
    transform: translateY(100%);
}

I've got a text-paragraph and a button. I want to display the button right-aligned below the text but I can't quite get it to work.
<a href="#">Link text</a>

Answer 2

只需使用所需的vertical-align，例如

＆＃13;

＆＃13;

button {
  vertical-align: -75%;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
  <button>Button</button>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一种方法是将它放在div中，宽度设置为100％（即，如果div和段共享父项），然后将divs text-align设置为右。

<div>
   <p>....</p>
   <div style="width:100%; text-align:right;">
       <button>click here</button>
   </div>
</div>

Answer 4

这是你正在寻找的吗？

＆＃13;

＆＃13;

div {
    width: 400px;
}


button {
    display: inline-block;
    background: orange;
    padding: 5px 10px;
    margin-left: 300px;
    width: 100px;
}

＆＃13;

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<button>Click Me</button>

＆＃13;

＆＃13;

＆＃13;

Answer 5

如果我理解你的问题，下面的小提琴应该有效。这是小提琴：http://jsfiddle.net/cLyycy3d/

CSS：

button {
    float: right;
}