0

タイトル（ナビゲーションバーの他のテキストよりも大きなフォント）をナビゲーションバーの左側に配置したいのですが、これまでのところ左側にタイトルを付けることができましたが、テキストの半分が外側にあるように、テキストが半分にカットされていますナビゲーションバーとその半分がその中にあります。テキストをナビゲーションバー内に完全に収めるにはどうすればよいですか?

CSS

<style>

 #navbar ul { 
    margin:0 auto;
    padding: 10px; 
    list-style-type: none; 
    text-align: center; 
    background:#1c1c1c;
    }

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
    font-family: calibri;
    font-size: large;
    text-decoration: underline;
    font-weight: 200;
    border: 0.5px solid #242424;
    border-radius: 2px;
    padding:.3em 1em; 
    color: #ffffff; 
    background-color:transparent; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #ffffff;  
    border-radius: 5px;
    color:#1c1c1c;  
    } 

#navbar {
  position: fixed;
  margin-top: 0;
  top: 0;
  left: 0;
  width: 100%;
  z-index:0;
}
 #navbar {
    overflow: hidden;
}
#navbar h1 {
    float: left;
}

</style>

HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
         <title>ClickonDeal.com.au-Electronics</title>
         <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
        </head>

 <div id="navbar">
        <h1>Click</h1>
      <ul> 
        <li><a href="#">Stuff</a></li> 
        <li><a href="#">more stuff</a></li> 
        <li><a href="#">stuff</a></li> 
        <li><a href="#">stuff</a></li> 
        <li><a href="#">stuff</a></li> 
    </form>
      </ul> 
    </div>  
    </div>

    </html>
4

2 に答える 2

0

以下の CSS をコードに追加します。

#navbar h1 {
    float: left;
    margin:0;
}

このJSFiddleを確認してください

于 2013-07-19T03:56:05.340 に答える
0

エラーをスローしている誤った終了タグがいくつかありますが、それが問題の原因ではありません。

考えられる問題は、ほとんどのブラウザーの H1 にデフォルトのマージンがあり、それがうまくいかないことです。

css リセット ( http://necolas.github.io/normalize.css/から開始) の追加を調査しますが、当面は、h1 でマージンを 0 に設定することでこれを修正できます。

#navbar h1 {
    float: left;
    margin: 0;
}

その変更を示す簡単な jsfiddle を次に示します。

于 2013-07-19T03:56:25.780 に答える