0

つまり、基本的に私が最後に Web ページの開発を行ったときは、HTML しかなく、とにかく基本的な理解しかありませんでした。だから今、私はキャッチアップをしてCSSを学ぼうとしています。私の問題は、完全に中央に配置されていない水平ナビゲーション バーです。幅、境界線、余白を調整しようとしましたが、何か不足しています。

私の現在のレイアウトでは、右側よりも左側に空白が少し多く、立ち往生しています。

jsfiddle は次のとおりです。

http://jsfiddle.net/PkvZ7/

CSS:

<!-- JASCO NAVBAR -->
ul
{
width:100%;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:none;
overflow:hidden;
}

li
{
align:center;
width:20%;
margin:0;
padding:0;
display:inline-block;
list-style-type: none;
}
a:link,a:visited
{
display:block;
width:100%;
font-weight:bold;
font-size:20px;
color:#FFFFFF;
background-color:#FF6103;
text-align:center;
padding:5px;
text-decoration:none;
font-variant:small-caps;
}
a:hover,a:active
{
background-color:#000000;
color:#FF6103;
}

#container {
  width:100%
}

<!-- TOP CSS-->
.top {
position:absolute;
width:80%;
height:10%;
margin-left:auto;
margin-top:20px;
margin-right:auto;
color:#000000;
padding:0;
}

<!-- CONTENT CSS-->
.content {
position:absolute;
width 100%;
margin-left:10px;
margin-right:10px;
padding:3px;
color:#dddddd;
}

#img
{
}

<!-- TOP IMAGE CSS-->
img.center {
display:block;
margin-left:auto;
margin-right:auto;
}

HTML:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jascostyle.css">
<title>Single"Frame" Test</title>
</head>

<body>
<div id="container">
  <center>
  <div class="top">
  <img class ="center" width="80%" height="5%" href="#temp" src="#temp" alt="JASCO ENERGY"/>
  <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  </ul>
  </div>


  <div  class="content">
  <h1>This is under construction!</h1>
  </div>
    </div>
  </body>
</html>

この問題に関するヘルプ/説明に感謝します。

ありがとう。

4

1 に答える 1

2

margin-left:auto固定幅 +とが必要ですmargin-right:auto。コンテンツに絶対的な配置を使用するべきではありません。自然に流れるようにしてください。

この<center>タグは廃止されたため、幅 960px の外側の「コンテナ」ラッパーにも同じ手法を使用してください。

ul {
    width:500px;
    list-style-type: none;
    margin-left:auto;
    margin-right:auto;
    padding:0;   
}

一般に、リストベースのメニューを使用する場合float:leftは、LI で使用display:blockし、A タグで使用し、リスト自体ではなく、他のすべてのスタイルを A タグに配置します。

私のチュートリアルを参照してください: I Love Lists .

于 2013-01-15T22:29:34.837 に答える