リストアイテムをCSSで少し動かすにはどうすればいいですか

Question

私はこれに少し慣れていて、少し助けが必要です。 いくつかの練習のためにランダムなウェブサイトを設計するだけで、ヘッダーにトップメニューを表示することができません。私はいくつかの場所でパディングの&の余白を変更し、それを動作させるように見えることはできません。私が何かが欠落している場合や、私のCSSを整理するためのよりよい方法があるかどうか不思議です。どんな助けでも大歓迎です。私はあなたがすでに0に見出しとあなたのトップメニューのマージントップの余白下を低減し、今あなたが必要と仮定感謝:)

#main { 
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
} 

body { 
    margin:0; 
} 

#topbar { 
    background-color: black; 
    height: 80px; 
    width: 100%; 
    margin-top: 0; 
    margin-bottom:0; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
} 

#text { 
    display:block; 
    color: White; 
    float:right; 
    padding-right: 820px; 
    padding-top: 10px; 
    font-size:20px; 
} 

#topmenu { 
    display:block; 
    list-style:none; 
    padding:0 400px 0px 0px; 
    float: right; 

} 

#topmenu li { 
    display: inline; 
} 

#topmenu a { 
    position:relative; 
    padding:0 4px 0 4px; 
    font-size: 13px; 
    text-decoration:none; 

} 

#topmenu a, #topmenu a:visited, #topmenu a:active { 
    color:white; 
} 

I want the menu to move up ever so slightly.

<div id="topbar" > 
<div id="text"><strong>My Template Website</strong></div> 
<div id="topmenu"> 
    <ul> 
     <li><a href=""/>Home</li> 
     <li><a href=""/>About Us</li> 
     <li><a href=""/>Services</li> 
     <li><a href=""/>Product</li> 
     <li><a href=""/>Contact Us</li> 
    </ul> 

Answer 1

絶対的な位置付けなしにトップメニューをもう少し持ち上げる方法。あなたが知らないかもしれないと、それを持って来るためにメニューの負のマージンを使用することが許可されていることを、次のとおりです。

#topmenu { 
    /* ... your other styles */ 
    margin-top: -15px; 
} 

これを適用する前に、あなたはおそらくブラウザで余裕を持ってごulのマージンをチェックshoudデフォルトのスタイルシート：

Webコンソールでページをデバッグするときは、自分でこれを確認することができます（すべての一般的なブラウザには1を持っている。例えば、FirefoxであなたがF12キーを押す必要があり）。

あなたのサイトの残りの部分がどのように見えているか、周辺にdiv#topmenuが本当に必要かわかりません。しかし、そうでない場合は、それを削除してulにIDを渡して、新しい #topメニューから余白部分を削除してください。これの利点は、2つの異なる要素を管理する必要がないことです。これは、この例での混乱の原因になった可能性があります。