1

マイページにメニューがあります。コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
<style type="text/css">
#head {
    background-image:url(http://manage.smarturl.it/_static/images/homeslice.png);
    background-repeat:repeat-x;
    text-align:center;
    color:#FFF;
    font:'BebasNeueRegular';
    border:none;
}
#head {
    padding:0px;
    margin:0px;
}
.style1 {
    font: 27px 'BebasNeueRegular', Arial, sans-serif;
    color:#FFF;
    list-style:none;
    margin-top:-20px;
}
.style1 li {
    float:left;
}
.style1 a {
    text-decoration:none;
    color:inherit;
    display:block;
    width:80px;
}

</style>
</head>

<body>
<div id="head">
<img src="logo8bit.png" width="491" height="188" /><br />
<ul class="style1"><li><a href="">LOGIN</a></li><li><a href="">SIGNUP</a></li><li><a href="">OTHER</a></li><li><a href="">MENU</a></li><li><a href="">STUFF</a></li></ul>
</div>
<br />
</body>
</html>

メニューを余白の中央に揃えることができません。これを試みるたびに、メニューの表示方法が台無しになり、表示されないためです。何か提案があれば教えてください。ありがとう！

4

2 に答える 2

0

要素に明示的な幅を設定できる場合<ul>、設定により要素margin:0 auto;が中央に配置されます。

の幅がわからない場合は<ul>、フロートをdisplay:inline-blockの代わりに に設定してからfloat:left;、親<ul>のtext-align:center;.

于 2012-05-20T20:14:06.167 に答える
0

このようにcssを使用できます。

.style1{ margin-left:20px;}
.style1 li{ list-style:none; float :left;  padding:5px:}

.style1 の margin-left を増やし、Gud プラクティスではないため、すべての負の値を削除することもできます。また、li 内のアンカー タグの幅を手動で指定する必要はないと思います。

于 2012-05-20T20:15:17.997 に答える