html - html list li 宽度和高度

Question

这是我的页面： http ://www.clouderize.it/michele/ 如您所见，菜单声音“Storia del Bernese”高于其他 li 声音。我希望所有 li 基于文本长度具有相同的高度但不同的宽度。

我必须在我的 css 中做些什么改变？

先感谢您。

Answer 1

嗨，现在定义你的li white-space nowrap

像这样

    #menu-Principale li {
    white-space: nowrap;
}

Answer 2

你用过：ul, menu, dir { display: block;

... }

你最好使用 display:inline; 并且不设置宽度（或设置为自动浏览器兼容性）

Answer 3

在您的代码中，标签低于 css

  a.tabInactive {
    background: url("images/menu_normal.png") repeat scroll 0 0 transparent;
        display: block;
        line-height: 33px;
        text-align: center;
        width: 76px;
    }

menu_normal.png尺寸77 X 34对您的菜单来说很小Storia del Bernese

因此，您必须再创建一张尺寸适合您的菜单的图像。然后为 id 创建新类li10它将起作用

Answer 4

不要将宽度固定为 li。也不必提及高度，因为我们有顶部填充 像这样给它

#menu-Principale li{
 display:inline-block;
 padding:6px 4px;
 width:auto
}

Answer 5

删除标签宽度，在左右添加填充，修复背景图像。现在您只需要微调背景图像/颜色。

a.tabInactive {
    display: block;
    line-height: 33px;
    padding-right: 15px;
    padding-left: 15px;
    width: auto;
    background-image: none;
    background-color: #EFEFEF;
}

a.tabInactive:hover {
    display:block;
    line-height:33px;
    padding-right: 15px;
    padding-left: 15px;
    width: auto;
    background-image: none;
    background-color: #CCC;
}

a.tabActive {
    display: block;
    color: #FFF;
    padding-right: 15px;
    padding-left: 15px;
    line-height: 33px;
    width: auto;
    background-image: none;
    background-color: #7F469D;
}