0

順序付けられていないリストを使用してナビゲーションメニューを作成しました。これには、スパン内にタグが含まれ、最初のスパン内にもう1つのスパンが含まれています-display:ブロック付き。何らかの理由で、リスト項目が水平方向に整列しません。これが私が何を意味するかを見るためのコードです：

<!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 に答える