-2

リンクがすべて左にずれているように中央を作成するにはどうすればよいですか? リンクを Web ページの中央上部に配置したいのですが...何か助けはありますか?? 私は前にこれをやったことがありますが、方法を覚えていません

CSS:

body {
    background: #B0FFF5            
}
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li
{
    float:left; /*supposed to be there */
}
a:link,a:visited
{
    display:block;
    width:120px;
    font-weight:bold;
    color:#ffffff;
    background-color:#3B5998;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#ffffff;
    color:#3B5998;
}

HTML:

<body>
    <ul>
        <li><a href="index.htm">Home</a></li>
        <li><a href="fbfame.htm">Fb Fame</a></li>
        <li><a href="donate.htm">Donate</a></li>
        <li><a href="https://Facebook.com" target="_blank">Facebook</a></li>
    </ul>
</body>
4

3 に答える 3

3

ボタンを一列に並べたい場合は、ウィンドウのサイズに関係なく、固定のwidthand を設定しmargin: 0 autoます。

ul
{
    width: 512px;
    margin:0 auto;
}

ここにデモがあります。

または、リスト項目間の空白を削除 (または別の手法を使用) し、それらdisplayをに設定しinline-blockて、コンテナに次の値を与えtext-align: centerます。

ul
{
    margin:0;
    text-align: center;
}
li
{
    display: inline-block;
}

ここにデモがあります。

于 2013-05-16T23:35:51.290 に答える
1 
ul
{
  list-style-type:none;
  margin:0;
  padding:0;

  width: 400px;
  margin: 0 auto;
}

お役に立てれば。

于 2013-05-16T23:41:53.947 に答える
0 
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;  
}

私はそれを行う方法を思い出す

于 2013-05-16T23:36:19.677 に答える