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

Question

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

移动版和桌面版的屏幕截图应保持相同。

此刻，我正在处理向右对齐的三个点(如上图所示)。

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

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 中的问题当我在移动版本中看到网页时，它一直在向右创建一个空白。我想知道我需要在上面的 CSS 代码/HTML 代码中进行哪些更改，以便在右侧看不到任何空白。

Answer 1

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

省略号{

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