Question

我正在尝试将两个链接垂直对齐到徽标两侧的中间位置，但它似乎不起作用。此外，我想让这个响应式导航，两个链接以手风琴下拉方式出现在徽标下方。我一直在寻找解决方案，但我找不到一个。

HTML

<nav>
        <ul id="nav">
        <li><a href="#">Boat</a>
                <ul class="boat">
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                </ul></li>
            <img src="images/logo.png"/>
            <li><a href="#">Experience</a>
                <ul class="experience">
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                </ul></li>

        </ul>
</nav>

CSS

* { 
   margin: 0px;
   padding: 0px;
}

header {
    width: 100%;
    text-align: center;
}

.center h1 {
    display: inline;
    vertical-align: 60%;
}


ul#nav {
    text-align: center;
    vertical-align:top;
}

ul#nav li {
    width: 125px;
    position: relative;
    margin-right:5px;
    line-height: 25px;
    border-radius: 10px;
    display: inline-block;
    padding: 5px;
}

ul#nav a {
   text-decoration: none;
   display: block;
   width: 125px;
   height: 25px;
   line-height: 25px;
   background-color: #f3f3f3;
   border: 1px solid #ccc;
   border-radius: 5px;
   text-align: center;
}

ul.boat, ul.experience {
   list-style-type: none;
   display: inline-block;
   text-align: center;
   font-size: 1em;
   position: absolute;
   top:100%;

}

ul#nav li:hover > a {
   background-color: yellow;
}

ul#nav ul.boat, ul.experience {
   display:none;
}

ul#nav li:hover ul.boat {
   display: block;
}

ul#nav li:hover ul.experience {
   display: block;
}

感谢您提供的任何帮助

Answer 1

ul#nav li
{
vertical-align: top; // takes the links to the top
padding-top: 10px; // modify so that it goes to middle
}

如果您尝试将链接放在图像中间，则此代码应该有效。请告诉我它是否有效

在这里做了一个小提琴

http://jsfiddle.net/h_awk/Ff5xk/

垂直对齐：中间

1 个答案: