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>

Answer 2

向其添加float: right。

a{
    display: block;
    float: right;
    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;  
}

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>

Answer 3

将此添加到您的css

display: block;
float: right;

＆＃13;

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;
	
	  display: block;
	  float: right;
}

＆＃13;

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

＆＃13;

Answer 4

编辑：将overflow: auto添加到容器中。

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;
}

div {
  overflow: auto;
}

<div>
<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>
</div>

Answer 5

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;
}

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

只需使用：float: right;

Answer 6

使用flexbox很容易！

html：

<div class="container">
    <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor deleniti labore voluptatem eum, delectus aperiam, qui culpa voluptate adipisci ipsum. Doloribus labore facilis id inventore omnis reprehenderit perferendis unde aspernatur.
    </span>
    <a href="#">Download</a>
</div>

css：

.container{
  display:flex;
}
.container >p{
  flex:1;
}
.container >a{
  flex:1;
}

https://jsfiddle.net/tfyrf630/

如何在右侧添加链接？

6 个答案: