центр <li>элементов в <ul>в зависимости от размера <li> - PullRequest
Новая
       41

центр <li>элементов в <ul>в зависимости от размера <li>

1 голос
/ 17 августа 2011

На изображении выше вы можете видеть, что - это не идеально - все элементы <ul> имеют одинаковый размер, а элементы <li> нет, но они центрированы в <ul> независимо от того, какой размер есть (всегда предполагая, что будет меньше)

как я могу это сделать? 

ul{ width:160px; }
li{ width:auto; margin:5px auto;}

не работает ..

-Изображение, отредактированное с текстами-

some text for the

1 Ответ

2 голосов
/ 17 августа 2011

Я не совсем понимаю, что вы пытаетесь сказать своими изображениями, но вот как сделать что-то похожее на них.

См .: http://jsfiddle.net/thirtydot/wGpPc/

HTML: 

<div class="listContainer">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        ..
    </ul>
</div>

CSS: 

.listContainer {
    width: 160px;
    background: #ccc;
    border: 1px solid #444;
    float: left;
    text-align: center;
    margin-right: 9px
}
.listContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    background: #f0f;

    /* for ie6/7 */
    *display: inline;
    zoom: 1
}
li {
    margin: 5px 0;
    background: #fff
}
...