1

だから私はそれでひどいことを除いていくつかのCSSを微調整しています。

私はそれらを持っています

#logop {
  text-align: left;
  height: 50px;
}

#menu {
  font-family: "Arial Black", Impact, Arial, sans-serif;
  text-align: center;
  width: 100%;
  height: 50px;
  padding-top: 13px;
  z-index: 30;
}

.nav {
  height: 100px;
  position: fixed;
  top: 0px;
  z-index: 20;
  width: 100%;
  background-color: rgb(41, 35, 30);
  -moz-box-shadow: 0px 2px 15px #000;
  -webkit-box-shadow: 0px 15px 5px #000;
  box-shadow: 0px 2px 15px #000;
  background-image: image-url('damask.png');
}

この

<div id="container" class="spacer">
    <div class="nav" id="top">
        <div id="menu">
            <div id="logop"> <%= image_tag('logo.png') %></div>
            <ul>
                <li><a href="#top">HOME</a></li>
                <li><a href="#one">ABOUT</a></li>
            </ul>
        </div>
    </div>
</div>

メニューの左側にロゴを表示しようとしています。ロゴを使用float:leftすると、メニューの左側に配置したいときに、ページの隅までロゴが表示されます。これをどのように行いますか？

4

3 に答える 3

1

以下のリンクを試してみてくださいfloat:leftメニュースタイルとロゴの両方に使用してください

<div id="container" class="spacer">
<div class="nav" id="top">
    <div id="menu">
        <div id="logop" style="float:left;"> <%= image_tag('logo.png') %></div>
        <ul style="float:left;">
            <li><a href="#top">HOME</a></li>
            <li><a href="#one">ABOUT</a></li>
        </ul>
    </div>
</div>
</div>
于 2012-10-20T11:08:10.660 に答える
1

float: leftin#logopとfloat: rightinを使用する必要があります#menu。作業例: http://jsfiddle.net/CxgTA/

于 2012-10-20T10:54:56.587 に答える
0

コンテナのスタイルについては触れていませんが、

最初に例のコンテナのサイズを定義します

  #container{width:1000 px; }   (you can specify it as per your requirements )

 and then divide it again in tow parts . 

  #logo{ width:100 px; float :left;  }
    #logo{ width:900 px; float :left;  }

こんな感じになります 

      <div id =logo>
      </logo>
     <div id = menu>
         </menu>
         </container >

これらの寸法は、uに理解させるためのものです。うまくいけば、それはアイデアをクリアします

于 2012-10-20T11:02:48.977 に答える