Question

所以我正在调整一些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>

我正试图让菜单左侧的logop。如果我使用float:left，当我只想将菜单留在菜单的左边时，徽标一直到页面的一角。我该怎么做？

Answer 1

您需要使用float: left中的#logop和float: right中的#menu。工作示例：http://jsfiddle.net/CxgTA/

Answer 2

试试以下链接使用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>

Answer 3

你没有提到容器的样式，

首先为参与者定义容器的大小

  #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 >

这些维度只是为了让你明白。希望它能清除这个想法

在菜单左侧放置徽标

3 个答案: