1

以下のcssコードは、mashable.comのような固定ヘッダーを作成しようとしたときに私が書いたものですが、どんなに頑張ってもlogo.pngをmargin:auto 19px;で表示させることができないようです。私は間違っています.htmlとcssの初心者なので、優しくしてください. また、ロゴとナビゲーション リストを 1 行にまとめたいと考えています。 

header{position:fixed;
   background:#333;
   height:128px;}

h1{    display:inline;
       float:left;
   background:url(images/logo.png) no-repeat;
       width:289px;height:47px;
       margin:
       text-indent:-9999px;}

nav {   

         height:26px;
         float:right;
     margin-top:19px;
     width:631px;}

nav ul li{
          display:inline;}

これはhtmlです：

<header>
    <h1>logo</h1>
    <nav>
        <ul>
            <li>Categories</li>
            <li>Search</li>
            <li>About me</li>
            <li>Contact me</li>                 
            <li>Social</li>
        </ul>
    </nav>
</header>
4

1 に答える 1

0

Margin auto はブロック要素でのみ機能し、インライン要素では機能しません。ロゴを中央に配置する場合は、h1 css で次の 2 つを変更します。

  1. への変更display: block;
  2. 削除するfloat: left;

明らかにマージン値も追加しますが、それは単なるコピー/貼り付けのタイプミスだと思います。

于 2013-07-11T11:45:43.003 に答える