Заставьте lis взять ширину их содержимого, отцентрируйте их, но держите их на отдельных строках - PullRequest
Новая
       31

Заставьте lis взять ширину их содержимого, отцентрируйте их, но держите их на отдельных строках

0 голосов
/ 21 сентября 2011

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

enter image description here

* обратите внимание, что элементы расположены по центру в окружающем поле.

* также обратите внимание, что ширина кнопки зависит от размера текста.

1 Ответ

2 голосов
/ 21 сентября 2011

Вы можете сделать это довольно легко, если вы добавите span к li s. 

<ul>
    <li><span>Longer Item</span></li>
    <li><span>Item 1000000000000</span></li>
    <li><span>Short</span></li>
</ul>

CSS 

ul{
    text-align:center;
    width:400px;
    border:1px solid black;
}

li{
    display:block;
}

li span{
    padding:1em;
    background:red;
    color:white;
    margin:1em auto;
    display:inline-block;
}

Пример: http://jsfiddle.net/jasongennaro/tDBbA/2/

...