编辑: 我找到了这段代码，它似乎按我想要的方式工作。您可以在 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;
}
最佳答案
我已经更新了你的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 中，这不是有效代码。
关于html - 编码 <ul> <li> 菜单以适应主 <div>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17119889/