html list li 宽度和高度答案

【问题标题】：html list li width and heighthtml list li 宽度和高度
【发布时间】：2012-09-04 18:46:27
【问题描述】：

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

我必须对我的 css 进行哪些更改？

提前谢谢你。

【问题讨论】：

解决您的问题，但通过大幅更改 HTML（因此不是答案）是 jsfiddle.net/chricholson/2XDgV。打破所有“规则”并仅使用<a>（而不是<li>）允许您使用display: inline-block;而无需担心兼容性（即使在旧浏览器中，任何默认的inline元素都可以转换为inline-block）。然后将所有样式直接应用于链接，灵活的宽度等等。也可以很容易地固定宽度。

标签： html css list height width

【解决方案1】：

您好，现在定义到您的li white-space nowrap

像这样

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

【讨论】：

要完成 Rohit 的回答，请勿使用固定宽度的图像作为背景。您可以将按钮分成三部分作为背景（左侧、中心、右侧），在中心项目（1px*36px img）上使用 repeat-x 来渲染按钮，或者您也可以使用 CSS3 进行渐变跨度>
但我没有一个名为 menu-principale 的 id....我必须在哪里添加这个 css 属性？
@michele here is id i.stack.imgur.com/ZDJn8.png check now add this css in your file as any
gradients.glrzad.com 您可以使用此网站（提供此类服务的众多网站之一）创建渐变，只需将样式应用于您的li 就可以了
white-space: nowrap; 你可以感觉到它正在工作，但是当你给container 一个固定的宽度时，这不是正确的方法。因为内容会超出单元格。你应该考虑其他或旧的浏览器。

【解决方案2】：

您使用过： ul，菜单，目录 { 显示：块；

... }

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

【讨论】：

【解决方案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 创建新类，它将起作用

【讨论】：

【解决方案4】：

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

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

【讨论】：

您是否理解我的回答并没有解决问题，或者您只是无缘无故地否决了它？

【解决方案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;
}

【讨论】：