html - 同一类的所有跨度应具有相同的宽度并保持悬停状态

Question

我的css不是很好，所以需要你的帮助。
我对 display: block; display: inline; 尝试了太多但无法理解如何修复此设计

.mainmenu{
    -moz-border-radius:10px 10px 10px 10px; 
    border-radius:10px 10px 10px 10px;  
    display: block;
    padding:1px;
    border:1px solid #021a40;
    background-color:#FFFFFF;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color:black;
}
.mainmenu:hover{
    display: block;
    padding:2px;
    border:1px solid #021a40;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
    color:highlight;
    box-shadow: 10px 10px 5px #888888;
}

http://fiddle.jshell.net/FKLfQ/6/

Answer 1

将此添加到您的 CSS:

#navigation {
    display:table;
}
span {
    display: block;
    width:100%;
}

DEMO

这占用了最大跨度的宽度为所有其他跨度的宽度，当内容改变时它是动态的。