Question

我希望我的徽标更进一步，不是完全居中，而是在那里。当我在顶部添加一个边距时，它也会推动我的菜单栏div。我尝试添加填充而不是移动div。我猜是因为其中没有任何内容正确吗？有没有办法将该div向下移动一点而不影响菜单栏div？

<div id="Container">

        <div id="logo"></div>
        <div id="menu-bar">
            <ul>
                <li><a>start</a></li>
                <li><a>end</a></li>
                <li><a>info</a></li>                
                <li><a>score</a></li>                
                <li><a>reload</a></li>            
            </ul>
        </div>


    </div>
</div>

-

@charset "utf-8";
/* CSS Document */

*{
    padding:0;
    margin:0;
}

html{
    background:url(../images/water-316625_1280.jpg);
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;  
}


#menu-bar{
    height:30px;
    float:right;
    text-align:right;
    background-color:rgba(173,172,172,.9);
    border-radius:10px;
    border:solid rgba(109,186,235,1.00)
    margin-top:0;

}

#menu-bar li{
        float:right;
        padding: 0 10px;
        font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
        font-size:110%;
        cursor:pointer


}

#logo{

    height:100px;
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;

}

Answer 1

所有CSS属性的默认值为“position：static;”。这意味着所有元素都会按照它们出现在html文件中的方式呈现。

因此，当您向div（即徽标）添加“margin-top”时，它将为该div添加高度，而后面的所有其他div将必须重新定位以适应该更改。

因此边距会增加元素的高度或宽度。你的标志是“身高：100px;”当你添加“margin-top：15px;”你的元素总高度为115px。这就是#menu-bar移动的原因。

解决这个问题的方法是将#logo div设置为“position：relative;”然后，您可以使用top，left，right，down属性。要根据元素的当前位置移动该元素，但不会影响文档中的其他div。例如：

#logo {
  position: relative;
  top: 20px;}

将#logo从当前位置下移20px。

希望有所帮助。

Answer 2

为什么要包含徽标容器内的菜单项？允许logo元素独立是一种很好的做法。请参阅更新的代码。

为#logo id
将;置于border ID的#menu-bar属性后面（代码中缺少） - border:solid rgba(109,186,235,1.00);和cursor:pointer中的#menu-bar li
请为margin-top:0元素提供<ul>。

以下是JSfilddle

为什么最高利润推动超过一个下调？

2 个答案: