Question

我在页面顶部制作了一个简单的导航栏，在导航栏中有一个图像。我想将图像对齐到导航栏的右侧，但由于某种原因，它不会对齐右侧。我在图片上尝试了以下内容：

margin-right: 0;
right: 0;
margin-right: 0%;

等

这是我的代码：

<div id="navBar">
    <img src="" id="navPNG">
</div>

#navPNG {
    left: 50;
    width: 75px;
    height: 75px;
    display: block;
}

#navBar {
    background-color: #3B3B3B;
    right: 0;
    left: 0;
    height: 75px;
    position: fixed;
    display: block;
}

请记住，无论用户滚动多远，我都希望导航栏保留在页面顶部。

Answer 1

使用此

 #navBar {
        background-color: #3B3B3B;
        right: 0;
        left: 0;
        height: 75px;
        position: fixed;
        width: 100%;
    }
    #navPNG {
        right: 12px;
        width: 75px;
        height: 75px;
margin-right: 14px;
        position: absolute;
    }

Answer 2

尝试浮动：右边的图像

#navPNG { 浮动：权利; }

Answer 3

这很简单，只需使用float: right将图片向右移动。

并将top: 0添加到#navBar元素以将其修复到顶部。

#navBar {
    background-color: #3B3B3B;
    right: 0;
    left: 0;
    top: 0;
    height: 75px;
    position: fixed;
    display: block;
}

#navPNG {
   float: right;
}

将text-align: right添加到容器中的另一种方法：

#navBar {
    background-color: #3B3B3B;
    right: 0;
    left: 0;
    top: 0;
    height: 75px;
    position: fixed;
    display: block;
    text-align: right;
}

#navPNG {
   display: inline-block;
}

css div margin-right not working

3 个答案: