Question

我制作了一个带有无序列表的导航菜单，其中包含其内部的标签和第一个内部的跨度 - 使用display：block。由于某种原因，列表项不会水平对齐。这是代码，看看我的意思：

<!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>

Answer 1

您没有告诉我们他们当前如何做对齐。如果它们的高度不同而且没有从顶部调整，那么你可能会成功添加（虽然CSS精英可能会讨厌我们）vertical-align:top;。

为什么<li>元素不能水平对齐？</li>

1 个答案: