Question

编辑：我找到了这个代码，它似乎按照我想要的方式运行。你可以在EDIT现场查看 - 我仍然无法让它坐在我的#main div中！我尝试在#menu span中使用100％和990px的宽度 - 似乎都不起作用。

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>

  <span></span>
</div>

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

结束编辑

我有一个菜单我遇到了一些问题 - 主要是横向问题：）

基本上，当您在Chrome中查看网站时，菜单会按照我希望的方式居中。

当您在FireFox中查看网站时，菜单右侧为5-10px短。

当您在Internet Explorer中查看时，菜单不会向左坐，而是从页面右侧溢出。

自己查看：编辑（请记住，index2.php在这里，而不是原始索引）

所以我的问题是：

如何正确设置/编码此菜单以适合我的父div？

我确实通过类似的问题查看了以前的主题，然而，无法做任何事情。提前谢谢你：）

HTML：

<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>

#sliderwrapper {width:635px;}

#control  {
  text-align:right;
  margin-top:5px;
}

#control a  {
  background:#87e7fa;
  padding:0 5px;
  color:#FFFFFF;
  text-transform:uppercase;
  text-decoration:none;
  margin-left:5px;
}

#control a.active {background:#265db9;}
#control a span {visibility:hidden;}

.sexyslider-control span {display:none;}

.sexyslider-title {
 font-weight:bold;
 color: #FFFFFF;
}



</style>

</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $("#slider").SexySlider({
        width      : 981,
        height     : 500,
        delay      : 3000,
        strips     : 18,
        autopause  : false,
        <!--navigation : '#navigation',--!>
        control    : '#control',
    direction    : 'left',
        effect     : 'fade'
      });
    });
</script>

<body>
<div id="wrapper">
  <div id="header"><img src="images/header.gif" alt="" /></div>


<div id="main">

    <ul>
    <h2><li><a href="index.php">Home</a></li>
    <li><a href="team.php">Meet Our Team</a>
    <li><a href="office.php">Office Information</a></li>
    <li><a href="first.php">First Visit</a></li>
    <li><a href="dental.php">Dental Topics</a></li>
    <li><a href="tour.php">Office Tour</a></li>
    <li><a href="contact.php">Contact Us</a></li></h2>
    </ul>
    <div id="sliderwrapper" class="clearfloat">
        <div id="slider" style="width:100%">
                    <img src="images/slide1.jpg" alt="" "/>
                                    <img src="images/slide4.jpg" alt=""  "/>
                    <img src="images/slide2.jpg" alt="" " />
                                    <img src="images/slide3.jpg" alt=""  "/>
                    <img src="images/slide4.jpg" alt=""  "/>
                                    <img src="images/slide5.jpg" alt=""  "/>
                    <img src="images/slide6.jpg" alt=""  "/>
                </div>

<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>  
</div>      



    <div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>

CSS：

body {
    margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
    text-align:center;
    background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
    width:1200px;
height:358px;
}
#main {
    width:990px;
height:100%;
    margin:0 auto;
text-align:left;

    }

#footer {
clear:both;
width:1200px;
height:354px;
}

h2 {
    font-family:soos_font;
    text-decoration:none;   
    text-shadow:1px 1px 0 rgba(0,0,0, 0.4); 
    }

ul
{
list-style-type:none;
margin:10 0;
padding:0;

}



li
{
display:inline;
width:100%;
margin:0 auto;
}


a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;

}

a:hover,a:active
{
background-color:#3650a2;
}

Answer 1

我已经更新了你的css

<强> CSS

#main {
    width:990px;
    height:100%;
    margin:0 auto;
    text-align:center;
}
#main ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
#main li{
    display:inline-block;
    /*width:100%;*/
    margin:0 3px;
}

<强> HTML

<div id="main">
    <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="team.php">Meet Our Team</a>
    <li><a href="office.php">Office Information</a></li>
    <li><a href="first.php">First Visit</a></li>
    <li><a href="dental.php">Dental Topics</a></li>
    <li><a href="tour.php">Office Tour</a></li>
    <li><a href="contact.php">Contact Us</a></li>
    </ul>
    <br style="clear:both;"/>
</div>

这是jsFiddle File

也不要将li包裹到h2，这不是有效的代码。

编码<ul> <li>菜单以适合主<div> </div> </li> </ul>

1 个答案: