导航菜单不在位置

似乎无法找到导航菜单布局有什么问题......它不是以div容器为中心。顺便说一下，它不是原来的菜单，它最初是没有图形的纯粹的css菜单，但同样的问题。由于我找不到有什么问题，所以我抓取了一个工作示例，但是与我的代码一起使用时出现同样的问题。导航菜单不在位置

请帮忙...谢谢。

enter image description here

<html> 
<head> 
<title>Home</title> 
</head> 
<link href="home.css" rel="stylesheet" type="text/css" /> 

<script src="js/jquery-1.11.0.min.js"></script> 

<body> 
<div id="container"> 
    <div class="header-cont"> 
     <div class="header"> 
      <img src="images/header.png"></img> 
      <?php require ("testnavigation.php"); ?> 
     </div> 
    </div> 

    <div id="content-container1"> 


     <div id="section-navigation"> 
      <p>sidebar navigation</p> 
     </div> 
     <div id="content"> 
      <p>contents here</p> 
     </div> 

     <div id="aside"> 
      <h3>Aside heading</h3> 
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
       esse molestie consequat, vel illum dolore eu feugiat nulla 
       facilisis at vero eros et accumsan.</p> 
     </div> 
     <div id="footer">Copyright © Site name, 20XX</div> 
    </div> 
</div> 
</body> 
</html>

这是CSS

body { 
    //font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif; 
    //font-size: 12px; 
    background: #0E2B43; 
} 

.header-cont { 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
} 

.header > img { 
    horizontal-align: middle; 
    vertical-align: middle; 
} 

.header { 
    height: 122px; 
    background: #333; 
    //border: 1px solid #CCC; 
    width: 100%; 
    margin: 0px auto; 
} 

#container { 
    margin: 0 auto; 
    width: 100%; 
    //width: 966px; 
    background: #33FF99; 
} 

#header h1 { 
    margin: 0; 
} 

#content-container1 { 
    float: left; 
    width: 100%; 
    background-color: #e9eaed; 
    margin: 122px auto; 
} 

#content-container2 { 
    float: left; 
    width: 100%; 
} 

#content { 
    float: left; 
    width: 40%; 
    padding: 20px 0; 
    margin: 0 0 0 2%; 
} 

#content h2 { 
    margin: 0; 
} 

#aside { 
    float: right; 
    width: 35%; 
    padding: 20px 0; 
    margin: 0 2% 0 0; 
    display: inline; 
} 

#aside h3 { 
    margin: 0; 
} 

#footer { 
    clear: both; 
    background: #ccc; 
    text-align: right; 
    padding: 20px; 
    height: 1%; 
} 

#content h1 { // 
    margin: 1em 0 0.5em 0; 
    color: #343434; 
    font-weight: normal; 
    font-size: 30px; 
    line-height: 40px; // 
    font-family: 'Orienta', sans-serif; 
    border-bottom: 1px solid rgba(53, 86, 129, 0.3); 
} 

/* These are used on the sidebar */ 
#section-navigation { 
    float: left; 
    width: 16%; 
    padding: 20px 0; 
    margin: 0 2%; 
    display: inline; // 
    background-color: #ccc; 
} 

#section-navigation ul { 
    margin: 0; 
    padding: 0; 
} 

#section-navigation ul li { 
    margin: 0 0 1em; 
    padding: 0; 
    list-style-type: none; 
} 

#section-navigation li a { 
    display: block; 
    margin: 0 0px 0 0; 
    width: auto; 
    text-decoration: none; 
} 
/* These are used on the sidebar */ 

/* These are used on the header navigation */ 
.clearer { 
    clear: both; 
} 

#navigation-row { 
    background: #aeb5b8 url("images/navigation-bg.gif") repeat-x left top; 
    height: 38px; 
    border-left: solid 1px #818b8f; 
    border-right: solid 1px #818b8f; 
    //width: 920px; 
    width: 100%; 
    margin: 0px auto; 
} 

ul#navigation { 
    display: block; 
    float: left; 
    list-style: none; 
    background: url("images/nav-spacer.gif") repeat-y -1px top; 
    height: 38px; 
} 

ul#navigation li { 
    display: block; 
    float: left; 
    background: url("images/nav-spacer.gif") repeat-y right top; 
    height: 38px; 
    padding-right: 2px; 
} 

ul#navigation li a { 
    display: block; 
    float: left; 
    line-height: 38px; 
    padding: 0px 20px; 
    font-family: Verdana; 
    font-size: 14px; 
    color: #313a3e; 
    text-decoration: none; 
    // text-transform: uppercase; 
    letter-spacing: -1px; 
} 

ul#navigation li a:hover, ul#navigation li a.active { 
    background: url("images/nav-bg-hover.gif") repeat-x left top; 
}

这是navigation.php

<div id="navigation-row"> 
    <ul id="navigation"> 
     <li><a href="Home.php">Home</a></li> 
     <li><a href="#">Account</a></li> 
     <li><a href="logout.php">Logout</font></a></li> 
    </ul> 

    <div class="search"> 
       <form action="search.php" method="POST"> 
        <input name="search" type="text" maxlength="30" class="textfield" 
         value="search" /> 

       </form> 
      </div> 

     <div class="clearer"></div> 
</div>

来源

2014-06-13 fyeth fyeth

您已经发布了很多不相关的代码，请除去导航特定的内容。看着图像，它似乎是导航元素中的填充或边距问题。您是否使用开发人员工具检查了元素？ –

对不起，我收录了一切，因为就像我说的我找不到问题的根源在哪里，不知道哪一个可能是相关的或者没有找到问题。我所做的一切都是根据我的知识，修补铬中的检查元素。 opps忘了告诉我一个新手:) –

我的猜测是，你ul#navigation被继承的默认用户代理的样式，它在Chrome中有16像素的保证金。如果您将margin: 0;添加到该规则，我想您可能会得到您想要的。

来源

2014-06-13 04:29:21 gtramontina

没问题。在附注中，我建议你尝试使用更多的语义标记。标签，如'

'，'

我只是删除这两条线

ul#navigation li a { 
    float: left; /* removed this */ 
    line-height: 38px; /* removed this */ 
}

http://jsfiddle.net/ykKkL/2/

来源

2014-06-13 04:25:17 CRABOLO

嗨，谢谢，但它的一部分解决了对齐，删除你说的并添加了边距：0由gtramontina使排列更好...但仍然没有居中。 –

只删除float：left和added margin：0到ul＃navigation by gtramontina，终于解决了这个问题....非常感谢很多人，但是我现在的问题是我会给谁信誉，因为你的答案都有助于解决问题？ –

导航菜单不在位置

回答

相关问题