0

I made a navigation menu with an unordered list, it contains tags inside them span and one more span inside the first - with display: block. For some reason the list items don't align horizontally. Here is the code to see what I mean:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Shoshin and Sumikiri's Website</title>
<style>
*{margin:0;
 padding:0;
 border: 0;
 }
body{
 margin: 0;
 padding: 0;
 background-color: #30b4bc;
 background-image: url('Green-pattern-cat.png');
 }
.wrapper{
 width: 900px;
 margin: 30px auto;
 }
img{
 display: block;
 margin: 0 auto;
 }
ul{
 text-align: center;
 margin: 50px 0;
 }
li{
 background: url('Patch-menu.png') no-repeat;
 list-style-type: none;
 display: inline-block;
 margin-right: 40px;
 }
li:last-child{
 margin-right:0;
 }
a{
 display:inline-block;
 text-decoration:none;
 width: 134px;
 height: 134px;
 }
a>span{
 font: italic bold 24px/35px Segoe UI, sans-serif;
 color:black;
 display: block;
 width: 108px;
 height: 106px;
 margin-top: 10px;
 margin-left: 7px;
 }
span span{
 font: 14px/14px Corbel, sans-serif;
 color: #7a3225;
 display: block;
 }
</style>
</head>
<body>
<div class="wrapper">
    <nav>
        <img src="Main-image.png" alt="Шоши и Суми"/>
        <ul>
            <li>
                <a href="#"><span>Шоши<span>Или какви ги свърши Шошката досега</span></span></a>
            </li>
            <li>
                <a href="#"><span>Суми<span>Или какви ги свърши Суми досега</span></span></a>
            </li>
            <li>
                <a href="#"><span>Новини<span>Последни постижения и приключения</span></span></a>
            </li>
            <li>
                <a href="#"><span>Още<span>Какво още пропуснахте от светските новости</span></span></a>
            </li>
        </ul>
    </nav>
</div>
</body>
</html>
4

1 回答 1

2

你没有告诉我们他们目前是如何对齐的。如果它们的高度不同并且没有从顶部对齐，您可能会成功添加（尽管 CSS 精英可能会因此而讨厌我们俩）vertical-align:top;。

于 2013-01-30T15:30:04.053 回答