Question

在下午的大部分时间里，我一直在与此作斗争，并且找不到与我合作的解决方案。我正在更改一些.asp页面以反映我们添加到网站的新页面，在添加到菜单后，我决定重新对齐文本。我删除了padding-left: 140px CSS并将其替换为text-align: center;

这导致导航菜单全部变得棘手（pic2）。我将CSS文件更改回原始文件，然而在IE和Chrome中它仍然显示奇怪，但在Firefox中它工作正常。这是代码，修剪为我认为相关的代码。如有必要，我可以发布所有内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="CompanyName CompanyProduct">
<title>CompanyName CompanyProduct</title>
<link rel="stylesheet" type="text/css" href="_style.css" media="screen">

<!-- Use after inserting the tabs above navigation bar
<script src="_tabrollover.js" type="text/javascript">
</script>
-->

<style type="text/css">
<!--
body,td,th {
font-family: Tahoma,Arial,Helvetica,sans-serif;
}
-->
</style>
<link href="/_toolbox/_green_button_rollover.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container">
<div id="header">
    <!--#include virtual="/_ssi/header.asp" -->
<div id="menu">
        <ul>                                        
            <li><a class="current">Home</a></li>
            <li><a href="/why.asp">Why CompanyProduct?</a></li>
            <li><a href="/features/index.asp">Features</a></li>
            <li><a href="/services.asp">Services</a></li>
            <li><a href="/pricing.asp">Pricing</a></li>
            <li><a href="/resources.asp">Resources</a></li>
      <li><a href="/helpx/faqx.asp">FAQ</a></li>
            <li><a href="/contact/index.asp">Contact Us</a></li>
        </ul>
    </div>

</div>    

<div class="green_box">
     <div class="clock"></div>
    <div class="text_content">
    <h1><a href="/features/index.asp">Power of<br>
    stuff</a></h1>

    </div>

    <!--begin div for right nav w rollovers, listing top 5 features-->

        <!--#include virtual="/_ssi/div_right_nav.asp" -->

    <!--end div for right nav w rollovers, listing top 5 features-->

其余的：

body {
background-color:#D7DFE2;
margin:0px;
padding:0px;
color:#416271;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1{
padding:5px 0 5px 0;
margin:0px;
font-size:22px;
color:#000004;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
}
h3{
padding:0 0 5px 0;
margin:0px;
font-size:12px;
color:#3898ac;
}


#main_container{
height:auto;
margin:auto;
background-color:#FFFFFF;
width: 900px;
}
#header{
width:900px;
height:auto;
margin:auto;
}
#menu{
width:900px;
height:32px;
padding:0px;
background-color:#416271;
clear: both;
}
#menu ul{
list-style:none;
margin: auto;
display:block;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 140px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#menu ul li{
list-style:none; 
display:inline;
float:left;
width:auto;
height:32px;
padding:0px;
line-height:31px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
#menu ul li a{
height:32px;
width: auto;
float:left;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
position: static;
}
#menu ul li a:hover{
height:31px;
width: auto;
text-decoration:none;
color: #fff;
background:url(images/menu_arrow.gif) no-repeat left;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
}
#menu ul li a.current{
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}

它的外观（在FF中看起来像这样）：pic1 http://itsza.ch/pic1.png

目前的状态（在IE和Chrome中）：pic2 http://itsza.ch/pic2.png

Answer 1

对于基于列表的菜单：

浮动您的LI，而不是A - 标记
在display:block - 标记

A

别忘了清理你的花车。

请参阅我的教程：I love Lists

Answer 2

使用它作为顶级菜单的基础，li是块，因此您不需要将它们内联。

CSS：

#menu ul li {
  list-style:none; 
  float:left;
}

.clear {
  clear:both;
}

HTML：

<div id="menu">
  <ul>
    <li><a href="...">...</a>
  </ul>
  <div class="clear"></div>
</div>

您还有一堆冗余规则，请尝试删除它们，以便更容易维护和阅读。例如以下规则

#menu ul li a.current {
  height:32px;
  width: auto;
  float:left;
  text-decoration:none;
  color: #fff;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 25px;
  background-image: url(images/menu_arrow.gif);
  background-repeat: no-repeat;
  background-position: left;
}

等同于此

#menu ul li a.current {
  background:url(images/menu_arrow.gif) left no-repeat;
}

这是因为你刚刚重做了#menu ul li

上已经存在的规则

HTML / CSS：在FF中工作，但不在Chrome或IE中工作

2 个答案: