如何解决这个布局错误？

时间：2012-01-25 11:11:15

标签： html css html5 css3

我尝试在菜单中渲染两行时有一个布局错误，从最低元素可以看出：

enter image description here

执行此操作的HTML是

<li class="top level1 parent"><a href="how-it-works/" title="It Works" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" /><span class="level1">Opportunity</span><span class="level2">Opportunity</span><img class="level2" src="/welcome/static/images/bullet07.png" border="0" alt="" /></a><ul>
  <li class="top first level2 parent"><a href="/how-to-join/" title="Nano Silver Works" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" /><span class="level1">How to join</span><span class="level2">How to join</span></a><ul>
<!--  <li class="first level3"><a href="how-it-works/proving/scientific-testing" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Scientific Testing</a></li>
<li class="last level3"><a href="how-it-works/proving/medical-testing" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Medical Testing</a></li>-->

</ul></li>
<li class="level2"><a href="how-it-works/history-of" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Why is MLM the Answer</a></li>
<li class="top last level2 parent"><a href="how-it-works/not-ionic-silver/" title="" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" /><span class="level1">Why are we right now right here for you</span><span class="level2">Why are we right now right here for you</span><img class="level2" src="/welcome/static/images/bullet07.png" border="0" alt="" /></a><ul>
  <li class="first level3"><a href="how-it-works/not-ionic-silver/not-colloidal-silver" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Marketing plan</a></li>
<li class="last level3"><a href="how-it-works/not-ionic-silver/silver-particle-size-matters" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Volume bonus</a></li>
<li class="last level3"><a href="how-it-works/not-ionic-silver/silver-particle-size-matters" ><img src="/welcome/static/images/bullet06.png" border="0" style="position:absolute;margin-left:-10px;margin-top:3px;" alt="" />Growth and Incentives</a></li>
</ul></li>

</ul></li>

我还有一个看起来像这样的样式表menu.css 

#multi-ddm {
    list-style:none;
    padding:20px 0 0 0;
    margin:0;
    float:right;
}

#multi-ddm li {
    float:left;
    margin:0 2px 0 2px;
    font-size:16px;
}

#multi-ddm li li {
    float: none;
}

#multi-ddm li li a {
    float: none;
}

#multi-ddm li a {
    display: block;
    padding:0 5px 0 0;
    color:#a9cfdd;
    cursor:pointer;
    float:left;
}

#multi-ddm li a span.level1 {
    float:left;
    padding:7px 6px 7px 11px;
}

#multi-ddm li a img.level2 {
    position: absolute;
    margin-top: -14px;
    margin-left: 145px;
}

#multi-ddm li.first a img.level2 {
    position: absolute;
    margin-top: -13px;
    margin-left: 145px;
}

#multi-ddm li.level1.active a,
#multi-ddm li.level1 a:hover {
    text-decoration:none;
    color:#f6f6f6;
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.png) no-repeat 100% -32px;
}

#multi-ddm li.active a span.level1,
#multi-ddm li a:hover span.level1 {
    text-decoration:none;
    color:#f6f6f6;
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.png) no-repeat;
}

#multi-ddm li.top a.parent-hover
{
    text-decoration:none;
    color:#f6f6f6;
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active2.png) no-repeat 100% -32px;
}

#multi-ddm li.top a.parent-hover span.level1 {
    text-decoration:none;
    color:#f6f6f6;
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active2.png) no-repeat;
}

#multi-ddm li a .cufon {
    float:left;
    margin:0 !important;
}

#multi-ddm li a img {
    display: none;
}

#multi-ddm li a span.level2 {
    display:none;
}

#multi-ddm li ul a {
    width: 147px;
    padding: 7px 10px 7px 18px !important;
    font-size: 12px;
    border-bottom: 1px #02699f solid;
    border-top: 1px #14a2df solid;
    background:#148bb4;
    text-transform:none !important;
}

#multi-ddm ul li.level2 a {
    background:#148bb4 !important;
    color:#f6f6f6;
}

#multi-ddm ul li.level2 a:hover {
    color:#aae7f9 !important;
}

#multi-ddm li ul a img {
    display:block !important;
}

#multi-ddm li ul a span.level1 {
    display:none !important;
}

#multi-ddm li ul a span.level2 {
    display:block !important;
}

#multi-ddm li ul li ul a {
    width: 147px;
    padding: 7px 10px 7px 18px !important;
    font-size: 12px;
    border-bottom: 1px #02699f solid;
    border-top: 1px #14a2df solid;
    background:#148bb4;
    text-transform:none !important;
}

#multi-ddm li ul li ul {
    margin-left:168px !important;
    margin-top:-31px !important;
}

*:first-child + html #multi-ddm li ul li ul,
*:first-child + html #multi-ddm li ul li.first ul,
*:first-child + html #multi-ddm li ul li.last ul {
    margin-left:168px !important;
    margin-top:-34px !important;
}

#multi-ddm ul li.first a {
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat !important;
    border-top:none;
}

#multi-ddm ul li.last a {
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat 0 -31px !important;
    border-top: 1px #14a2df solid;
    border-bottom:none;
}

#multi-ddm ul li.last ul li a {
    background:#148bb4 !important;
    border-bottom: 1px #02699f solid;
}

#multi-ddm ul li.last ul li.first a {
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat !important;
    border-top: none;
    border-bottom: 1px #02699f solid;
    margin-top:1px;
}

#multi-ddm ul li.last ul li.last a {
    background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat 0 -31px !important;
    border-bottom: none;
    border-top: 1px #14a2df solid;
}

#multi-ddm li ul {
    display: none;
    list-style: none;
    position: absolute;
    margin-top: 29px;
    margin-left: -2px;
    z-index: 10000;
    padding: 0;
}

*:first-child + html #multi-ddm li ul {
    margin-left:-100% !important;
}

*:first-child + html #multi-ddm li ul li {
    margin-left:0 !important;
}

*:first-child + html #multi-ddm ul li.top.level2.parent {
    margin-bottom: -3px;
}

您能告诉我解决此布局错误需要做些什么吗？谢谢

1 个答案:

答案 0 :(得分：4)

不确定我是否正确理解这一点，但我认为这是因为按钮背景是图像，因此无法拉伸以适应文本。有更好的方法来做你想要的事情，包括现代的CSS3技术。

此外，在您参与其中时，请考虑查看您的CSS - 看起来好像需要进行大量优化。

相关问题
最新问题