Question

这看起来很简单，但我无法通过以下方案获得正确的语法。我有一些为屏幕顶部定义的下拉菜单。我希望list-items（每个LI）与其父LI一样宽。对于最小宽度和继承来说，这似乎是一项简单的工作，但我无法使其正常工作。

现在，“继承”这个词在VS中被加下划线，好像它不被识别一样。页面将构建/加载正常，但它显然没有读取参数，因为LI控件不像它们的父LI那样宽。任何帮助表示赞赏。

以下是我的HTML的一部分：

<ul id="javascriptDDM">
    <li><a href="#"> MAIN OPTION 1 </a>
        <ul>
            <li><a href="../somePage.aspx?type=1"> Choice 1 </a></li>
            <li><a href="../somePage.aspx?type=2"> Choice 2 </a></li>
            <li><a href="../somePage.aspx?type=3"> Choice 3 </a></li>
        </ul>
    </li>
    <li><a href="../mainPage.aspx"> MAIN OPTION 2 </a>
        <ul>
            <li><a href="../somePage.aspx?type=1"> Choice 1 </a></li>
            <li><a href="../somePage.aspx?type=2"> Choice 2 </a></li>
            <li><a href="../somePage.aspx?type=3"> Choice 3 </a></li>
        </ul>
    </li>
</ul>

...编辑 - 这里是所有javascriptDDM CSS：

#javascriptDDM { width: auto; margin: 0; padding: 0 }    
    #javascriptDDM li { width: auto; float: left; list-style: none }
    #javascriptDDM li a { display: block; background: #606668; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; border-top: none; color: White; white-space: nowrap; background-position:left center; }
    #javascriptDDM li a:hover { background: #999999; color: #FFFFFF; }
        #javascriptDDM li ul { width: auto;    margin: 0; padding: 0; position: absolute;    visibility: hidden; z-index: 1000 }        
        #javascriptDDM li ul li { min-width: inherit; float: none;    display: inline }        
        #javascriptDDM li ul li a{ color: #FFFFFF;background: #999999 }        
        #javascriptDDM li ul li a:hover { color: #000000; background: #FFFFFF}

Answer 1

Inherit将使min-width属性与父项的min-width属性具有相同的“指定”值。如果您没有在父元素上设置min-width，则它将没有任何值。

Answer 2

首先，您应该将LI显示模式设置为阻止。在这种情况下，您至少可以控制它的宽度。

Answer 3

WEFX

只有“块级”元素才会继承其父级的宽度。 “a”元素本质上不是“块”级元素。

因此，要解决此问题，您应该在“a”元素中添加“display：block”，或者将min-width CSS放在li而不是a上。

如何在CSS中使用min-width继承？

3 个答案: