javascript - 我怎样才能把链接放在右边？

Question

这是我的代码:

a{
    display: block;
    border: 3px solid #ffcb08;
    border-radius: 100px;
    text-align: center;
    color: #222;
    text-decoration: none;
    font-weight: 300;
    font-size: 20px;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 15px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    width: 160px;
    float: right;
}

p{
    border: 1px solid;
}

<p>
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here.
<a href="#">Download</a>
</p>

我想做的就是将该按钮放在右侧，而不对其设置 position: absolute;。我该怎么做？

Answer 1

您可以通过多种方式做到这一点，这里是Flexbox方式:

text {
  display: flex;
  flex-direction: column; /* vertical stacking */
  /* align-items: flex-end; affects all flex-items */
}

a {
  align-self: flex-end; /* affects only this flex-item */
  display: block;
  border: 3px solid #ffcb08;
  border-radius: 100px;
  text-align: center;
  color: #222;
  text-decoration: none;
  font-weight: 300;
  font-size: 20px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 15px;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  width: 160px;
}

<text>
  some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here.
  <a href="#">Download</a>
</text>