Question

我正在制作一个网站，我在将一些按钮对齐到页面右侧时遇到了一些问题。

我尝试过使用text-align: right和float: left。

任何人都可以试着看看我做错了吗？

目前正在http://biolinks.redxte.ch/

感激不尽。

Answer 1

使用此

.button-parent {
    text-align: right;
}

button {
    display: inline-block;
}

或者如果你想让它绝对定位，你可以使用这个

.add-me {
    position: absolute;
    right: 20px;
}

Answer 2

您可以使用

.add-me{
    margin-left : 80%;
}

我是初学者，但我认为这可以解决您的问题。

Answer 3

只需在行之后添加.col-sm-12 div即可完美运行

<div class="row social" id="snapchat">
  <div class="col-sm-12">
            <img src="/i/snapchat.svg" class="social-img">
            <span class="social-text">Snapchat</span>
            <span class="add-me">
                <a href="#" class="btn btn-secondary" role="button">Add Me</a>
            </span>
        </div>
</div>

Answer 4

如果你在左边的元素中包含你想要的东西，你可以使用带有justify-content: space-between的flexbox来推动行的远边缘上的元素。

您还可以在align-items: center的每个元素上使用flexbox，使所有元素垂直居中。

我在内容.icon的div中将内容包装在左边，然后您需要应用的就是这个CSS

.social, .icon, .add-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

这是一个演示。

/* included this from your site so the image won't be huge */
.social-img {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
}

/* this is the part you need */
.social, .icon, .add-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<base href="http://biolinks.redxte.ch/">

<div class="row social" id="instagram">
  <div class="icon"> <!-- added this div -->
    <img src="/i/instagram.png" class="social-img">
    <span class="social-text">Instagram</span>
  </div>
  <span class="add-me">
    <a href="https://instagram.com/redxtechx" target="_blank" class="btn btn-primary" role="button">View Profile</a>
  </span>
</div>

Answer 5

您可以使用基本的One。这是

    <button class="btn" style="float: right;">See More..</button>

对齐按钮正确

5 个答案: