Question

我正在制作一个css水平导航菜单。如何使子菜单宽度自动调整到其内容？就像主菜单一样。

文字只是折回来了。

Answer 1

试试这个：

#nav ul a {
        display: block;
        height:25px;
        padding: 0 20px;/*changeto width for static size*/
        line-height:25px;
        background: rgba(24,24,24,1.0);
        /* text-align:center; */
        border: 1px solid grey;
        border-radius: 0px 0px 0px 0px;
        width: 100%;
}

http://jsfiddle.net/aunbyw9L/

Answer 2

不确定这是否可以解决您的问题，但实际上，唯一真正的问题是您有明确的身高设置。 height:25px;是导致版本号溢出其容器的原因。由于父li，它们是宽度。块级元素默认为100% ish width。（在填充方面存在一些差异，如果要将块元素重置为默认值，则使用width:auto）。不幸的是，所有这一切都无济于事。 position:absolute元素正在尝试匹配其父级的宽度。您可以执行以下两项操作：删除height:25px并允许line-height:25px保持您的身高（这会导致所有文字都在您的li中，但他们只会与父li）一样宽，或者您可以提供li a white-space:nowrap。我个人更喜欢第二种方法。您可能遇到的错误是由于缺乏包装（显然）而导致屏幕上的长标题结束。这是规则和演示：

http://jsfiddle.net/81un9gaa/（查看第2.2.2项）

#nav ul a {
    display: block;
    /*height:25px;*/ /* remove this */
    padding: 0 20px;/*changeto width for static size*/
    line-height:25px;
    background: rgba(24,24,24,1.0);
    text-align:center;
    border: 1px solid grey;
    border-radius: 0px 0px 0px 0px;

    /* this one is optional, but I prefer it
       in most cases. */
    white-space:nowrap;
}

CSS下拉菜单 - incorect子菜单大小

2 个答案: