Как использовать наследование по минимальной ширине в CSS? - PullRequest
Новая
       33

Как использовать наследование по минимальной ширине в CSS?

0 голосов
/ 30 июня 2011

Это кажется действительно простым, но я не могу получить правильный синтаксис в следующем сценарии. У меня есть несколько выпадающих меню, определенных для верхней части экрана. Я хочу, чтобы элементы списка (каждый LI) были как минимум такими же широкими, как родительский LI. Это кажется легкой задачей для минимальной ширины и наследования, но я не смог заставить его работать должным образом.

Прямо сейчас, слово «наследовать» просто подчеркивается в VS, как будто оно не распознано. Страница будет хорошо скомпилирована / загружена, но она явно не читает аргумент, поскольку элементы управления 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>

... РЕДАКТИРОВАТЬ - вот ВСЕ из CSS javascriptDDM: 

#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}

Ответы [ 3 ]

3 голосов
/ 30 июня 2011

Наследование заставит свойство min-width принять то же «указанное» значение, что и свойство min-width родителя.Если вы не установите min-width для родительского элемента, он не будет иметь никакого значения.

2 голосов
/ 30 июня 2011

Прежде всего, вы должны установить свой режим отображения LI, чтобы заблокировать.В этом случае вы по крайней мере сможете контролировать его ширину.

1 голос
/ 30 июня 2011

WEFX

Только элементы уровня блока будут наследовать ширину своих родителей. Элемент "a" по своей сути не является элементом уровня "block".

Таким образом, чтобы исправить это, вы должны либо добавить «display: block» к элементу «a», либо вместо него поместить CSS минимальной ширины на li вместо a.

...