Question

尝试在导航栏前面/上方放置徽标时会出现问题（带下拉链接）。我目前的CSS和HTML在下面，但我愿意接受其他建议，并且所有帮助都很受欢迎。我希望徽标出现在导航栏的最右侧：

enter image description here

我希望导航栏向上移动，使其位于占位符徽标的中间位置。不幸的是，我不熟练使用position:或top:和bottom:

CSS：

.logo
{
position:relative;
z-index: 2;
width: 100%;
height:200px;
text-align:right;
}

#nav
{
z-index: 1;
border:0;
background-color:#FFEE00;
list-style:none;
padding-right: 300px; /* the width of the logo, so logo doesn't obscure text on smaller screens/re-sized windows */
text-align:left;
font-family:Inky,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:18px;
}

#nav li
{
position:relative;
display:inline;
}

#nav a
{
display:inline-block;
padding:10px;
}

#nav ul
{
position:absolute;
left:-9999px;
margin:0;
padding:0;
text-align:left;
}

#nav ul li
{
display:block;
background-color:#fff;
}

#nav li:hover ul
{
left:0;
}

#nav li:hover a
{
text-decoration:underline;
background:#FFEE00;
}

#nav li:hover ul a
{
text-decoration:none;
background:none;
}

#nav li:hover ul a:hover
{
text-decoration:underline;
background:#f1f1f1;
}

#nav ul a
{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}

#nav a
{
color:#000;
text-decoration:none;
font-weight:lighter;
}

#nav a:hover
{
text-decoration:underline;
background:#f1f1f1;
}

HTML：

<div class="logo">
        <img src="http://placehold.it/300x200" alt="logo" height="200" width="300">
        </div>


        <ul id="nav">
            <li><a href="/">HOME</a></li>
            <li>
                <a href="#">CLUBS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>                       
                </ul>
            </li>
            <li>
                <a href="#">SHOWS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>
                </ul>
            </li>
            <li>
                <a href="#">WORKSHOPS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>
                </ul>
            </li>
            <li>
                <a href="#">KIDS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>
                </ul>
            </li>
            <li>
                <a href="#">TESTIMONIALS</a>
            </li>                               
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT US ></a>
            </li>
        </ul>

非常感谢提前。

Answer 1

添加：

position: relative;
top: -140px;

到#nav似乎就是这样做的。

Answer 2

根据我使用保证金的经验，通常可以做到这一点

 .logo
 {
 position:relative;
 z-index: 2;
 width: 100%;
 height:200px;
 text-align:right;
 margin-right: 0;
 margin-left: auto;
 margin-bottom: -140px; //Tho i would fine tune this if i were you

 //Or if you wish margin: 0px 0px -140px auto (margin: top right bottom left)
 }

Answer 3

通过＆＃34;占位符标识的中间位置＆＃34;我知道您希望导航栏位于徽标的中间（垂直）。您必须将徽标替换为position:absolute，并设置ul顶部。

尝试添加此css：

.logo img
{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.logo ul
{
    position: relative;
    top: 50%;
    z-index: 1;
}

使用CSS将div置于导航顶部

3 个答案: