0

このナビゲーション メニューをセンタリングするのに助けが必要です。私はCSSにかなり慣れていないので、学校のプロジェクトを完了する必要があります 

<html>
<head>
<title>Website</title>
<link rel="icon" " href="favicon.ico" />
<style>
ul.menu{list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;}
li.menu{display:inline;}
a:link,a:visited.menu{font-weight:bold;color:#FFFFFF;background-color:#35BFD7;text-    align:center;padding:6px;text-decoration:none;text-transform:uppercase;}
a:hover,a:active.menu{background-color:#3597FF;}
body{background-image:url('background.gif');background-size:100% 100%;}
</style>
</head>
<body>
<ul class=menu>
<li class=menu><a href="default.asp">Home</a></li>
<li class=menu><a href="news.asp">News</a></li>
<li class=menu><a href="contact.asp">Contact</a></li>
<li class=menu><a href="about.asp">About</a></li>
</ul>
</body>
</html>
4

4 に答える 4

0 
<html>
<head>
<title>Website</title>
<link rel="icon" " href="favicon.ico" />
<style>
ul.menu{list-style-type:none;margin-left: auto;margin-right: auto;
width: 334px;padding:0;padding-top:6px;padding-bottom:6px;}
li.menu{display:inline;}
a:link,a:visited.menu{font-weight:bold;color:#FFFFFF;background-color:#35BFD7;text-    align:center;padding:6px;text-decoration:none;text-transform:uppercase;}
a:hover,a:active.menu{background-color:#3597FF;}
body{background-image:url('background.gif');background-size:100% 100%;}
</style>
</head>
<body>
<ul class=menu>
<li class=menu><a href="default.asp">Home</a></li>
<li class=menu><a href="news.asp">News</a></li>
<li class=menu><a href="contact.asp">Contact</a></li>
<li class=menu><a href="about.asp">About</a></li>
</ul>
</body>
</html>
于 2013-04-12T01:17:22.387 に答える
0

に追加text-align:centerするだけ<ul>です。display:inlineこれにより、すべてのdisplay:inline-block要素が中央に配置されます。

jsフィドル

ul.menu {
    text-align:center;
}
于 2013-04-12T01:12:51.990 に答える
0

インラインミュージックだけでなく、テキストをページの中央に配置したい場合は、追加するだけです

body {
  text-align: center;
}

必要に応じて ul を div で囲み、代わりにそれを中央に配置します。

于 2013-04-12T01:13:27.503 に答える
0

テキストを水平方向の中央に配置する場合は、「text-align: center」でうまくいくはずです。

ただし、すべてのリスト項目を一列に並べて表示する場合は、次のように指定する必要があります。

li {
    display: inline-block;
}
于 2014-12-02T21:29:52.140 に答える