Поддержание ширины лимита в соответствии с содержанием

Question

Здесь у меня отсутствует что-то основное.

HTML

Unordered List: 
<ul> 
    <li>Apple</li> 
    <li>Ball</li> 
    <li>Cat</li> 
</ul> 

CSS

ul li{ 
    background-color:#fcf; 
    margin:5px; 
    list-style:none; 
} 

Fiddle Link

Я хочу ширина из Ли быть по содержанию, но здесь ширина 100% (может быть).
Помогите мне!
Заранее спасибо

Answer 1

Вы могли плавать и очистить пункты списка, как:

ul li{ 
    background-color:#fcf; 
    margin:5px; 
    list-style:none; 
    float:left; 
    clear:left; 
} 

jsFiddle example

Или обернуть элементы списка в промежутке маркированного списка:

<ul> 
    <li><span>Apple</span> 
    </li> 
    <li><span>Ball</span> 
    </li> 
    <li><span>Cat</span> 
    </li> 
</ul> 
ul li { 
    list-style:none; 
} 
ul li span { 
    background-color:#fcf; 
    margin:5px; 
} 

jsFiddle example

Answer 2

Попробуйте что-нибудь подобное. Он выполняет то, что вы хотите, но я не могу представить, что это все так практично.

CSS

ul li { 
    background-color:#fcf; 
    margin:5px; 
    list-style:none; 
    display:inline; 
    float:left; 
    clear:both 
} 

http://jsfiddle.net/ytL0rweo/

Answer 3

При использовании: поплавка или дисплей: встроенный блок

ul li{ 
    background-color:#fcf; 
    margin:5px; 
    list-style:none; 
    float:left; 
} 

ИЛИ

ul li{ 
     background-color:#fcf; 
     margin:5px; 
     list-style:none; 
     display:inline-block; 
}