javascript - 如何在右侧放置链接？

这是我的代码：

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;。我该怎么做？

最佳答案

你可以通过多种方式来实现，以下是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>

关于javascript - 如何在右侧放置链接？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47323543/