在 css/bootstrap 中将图像向右对齐

Question

我有一个如下所示的屏幕截图，我试图在 HTML、CSS 和 JS 中复制它。

The screenshot should remain the same both for mobile and desktop version。

此时，我正在处理向右对齐的三个点（如上图所示）。

我用 HTML 和 CSS 代码为它创建了一个fiddle。我为三个点创建了一个图像。我用来将三个点图像向右对齐的代码是：

HTML：

<div class="nav-top-searchbar">
    <form>
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search">
        <img src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
    </form>
</div>

CSS：

#ellipsis {
    top: -30px;
    position: relative;
    left: 1320px;
}

问题陈述：

fiddle 中的问题是当我在移动版中看到网页时，it is creating a white space all the way towards the right。我想知道我需要在上面的 CSS 代码/HTML 代码中进行哪些更改，以便在右侧看不到任何空白。

Answer 1

我会建议您将图像放在 div 容器中，但试试这个

省略号 {

top: -30px; position: absolute ; right:0; }

Answer 2

您应该执行以下操作：

1) #ellipsis 本身

#ellipsis {
    top: 12px; // Sounds good and a bit centered [ Vertically ]
    position: absolute;
    right: 20px; // Increase or decrease it depends on your UI needs
}

我为什么要改这里？

1. top 从负到正。
2. position 从relative 到absolute，因为我们将relative 位置赋予<input> 本身。因为我们需要被包裹在里面。如果您对relative 和absolute 感到困惑，请快速查看this answer。
3. 我们没有使用left: 1320px;，而是使用right 将其粘贴在右侧

2) #ellipsis 容器/.nav-top-searchbar

.nav-top-searchbar {
    position: relative;
}

如果不添加此代码，您的代码可能会正常运行，但我强烈建议您添加此代码以避免现在甚至以后出现任何样式问题。某些浏览器可能运行良好 - 因为它现在可以运行与我一起不添加它 - 但您应该考虑将relative 添加到父级以将您的图像保留在其中。

---

应用上述更改，如果您有任何其他问题，请告诉我！

Answer 3

我会用float: right; 将那个元素浮动

Answer 4

CSS：

   #ellipsis {
         top: -30px; 
         position: absolute; 
         right:0;
   }