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