demo

Question

我的代码存在很大问题。我已经阅读了与这个主题相关的所有帖子，我觉得我很蠢。大声笑。我不能让我的工作。

以下是该网站（请在Chrome中查看）： http://tinyurl.com/okfo53p 这是IMO的简化代码： http://jsfiddle.net/r8Rc9/4/

<div id="menubar" align="center">
    <ul class="menu">
        <li class="home"><a href="index.html">Home</a></li>
        <li class="services"><a href="services.html">Services</a></li>
        <li class="enquiry"><a href="enquiry.html">Enquiry</a></li>
        <li class="aboutaal"><a href="aboutall.html">About AAL</a></li>
        <li class="contactus"><a href="contactus.html">Contact us</a></li>
    </ul>
</div>

<style>
#menubar { height:50px; width:735px;}
#menubar ul { display:inline;}
#menubar li { margin:0 0 0 0; padding:0 0 0 0; border:0; list-style-type:none; display:block; float:left;}
#menubar li a:link, #menubar li a:visited { display:block; height:50px; width:147px;}
</style>

你能不能帮我调整最后一句话，就像在Chrome中发疯一样。谢谢。赞赏。

Answer 1

定义您的样式表css

#menubar ul {
display: block;
padding: 0;
margin: 0;
}

<强> Live Demo

Answer 2

您需要增加width

的#menubar

对于实例，

#menubar {
    height:50px;
    width:775px;
    }

<强> WORKING DEMO

Answer 3

demo

从float:left;移除li并将float:left;添加到a tag.

#menubar {height:50px;width:735px;}
#menubar ul { display:inline;}
#menubar li { margin:0 0 0 0; padding:0 0 0 0; border:0; list-style-type:none; display:block;}
#menubar li a:link, #menubar li a:visited { display:block; height:50px; width:147px; float: left;}

Answer 4

试试这个：

<div id="menubar" align="center">
    <ul class="menu">
        <li class="home"><a href="index.html">Home</a></li>
        <li class="services"><a href="services.html">Services</a></li>
        <li class="enquiry"><a href="enquiry.html">Enquiry</a></li>
        <li class="aboutaal"><a href="aboutall.html">About AAL</a></li>
        <li class="contactus"><a href="contactus.html">Contact us</a></li>
    </ul>
</div>

<style>
#menubar { height:50px; width:735px;}
#menubar ul { display:inline;}
#menubar .menu li { margin:0 0 0 0; padding:0 0 0 0; border:0; list-style-type:none; display:block; float:left;}
#menubar .menu li a:link, #menubar li a:visited { display:block; height:50px; width:147px;}
#menubar .menu li:last-child{
  /*do something with last li*/
}
</style>

ul li最后一个元素对齐

4 个答案:

demo