Как я могу получить <ul>, который будет равномерно распределен по области содержимого, в которой он существует? - PullRequest
Новая
       12

Как я могу получить <ul>, который будет равномерно распределен по области содержимого, в которой он существует?

6 голосов
/ 17 августа 2010

У меня есть список, который я использую в качестве списка вкладок: 

<div id="SearchForm">
    <ul class="TabControl">
        <li>
            <a href="/search/Funds">Funds (60)</a>
        </li>
        <li>
            <a href="/search/Companies">Companies (4)</a>
        </li>
        <li>
            <a href="/search/Groups">Groups (1)</a>
        </li>
        <li>
            <a href="/search/Categories">Categories (0)</a>
        </li>
        <li>
            <a href="/search/Categories">Identifiers (60)</a>
        </li>
    </ul>
</div>

где CSS определяется следующим образом: 

#SearchForm ul {
    list-style: none;
    padding:0;
    margin: 15px 0 5px 0;
}

#SearchForm li {
    display: inline;
    background-color: #F6E9D8;
    margin: 12px 6px 0 0;
    padding: 6px 0 6px 0;   
}

#SearchForm li a {
    padding: 0 20px;
}

Этот список занимает только около 90% ширины, доступной для него на странице, тогда как все остальное на странице занимает 100% ширины, потому что они расположены в div. Доступное им пространство определяется в элементе, предоставленном клиентом на 

 width: 62.1em

По сути, мне нужно, чтобы вкладки распределялись равномерно, чтобы они заполняли всю доступную им ширину, а текст / ссылка выравнивались по центру каждой вкладки? Есть ли способ для меня сделать это?

1 Ответ

5 голосов
/ 17 августа 2010

Ну конечно. Я собрал демо здесь . CSS выглядит следующим образом с пояснениями в виде комментариев: 

#SearchForm {
    /* Set width of parent div */
    width: 62.1em;   
}

#SearchForm ul {
    /* Make ul take 100% of its parent's width */
    width: 100%;

    list-style: none;
    padding: 0;
    margin: 15px 0 5px 0;
}

#SearchForm li {
    /* Float the li's left and give them 20% width (20% * 5 = 100%) */
    float: left;
    width: 20%;

    /* Make sure no horizontal padding/margin is applied.  Since we've set an 
       explicit width on the li, horizontal padding/margins would add to this, 
       making the element greater than 20% width and causing float drop */        
    margin: 12px 0 0 0;
    padding: 6px 0;   
}

#SearchForm li a {
    /* Set the nested links to display block and align their text center */
    display: block;
    text-align: center;

    /* Here we can safely apply horizontal padding/margins because we haven't
       explicitly set a width on the element */
    margin: 0 6px 0 0;
    padding: 0 20px;

    background-color: #F6E9D8;
}
...