Абсолютная проблема ширины позиционируемого элемента

Question

У меня следующая структура DOM

<div>
    <span>/* comment action */</span>       //float:left
    <span>/* like action */</span>          //float:left
    <span>/* other actions                  //float:right; position:relative;
        <ul>                //position:absolute;
            <li>Set due date</li>
            <li>Delete</li>
        </ul>
    </span>
</div>

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

Вот несколько скриншотов, которые дадут вам гораздо лучшую идею.

http://imgur.com/IkbAI (максимальная ширина слова «Опции»)

http://imgur.com/h6uHc (максимальная ширина слова «время»)

http://imgur.com/lNCQu (максимальная ширина слова "время выполнения" при удалении пробелов)

Как я могу это исправить? (Я не хочу указывать конкретную ширину ul)

Answer 1

@ Bongs;напишите так:

ul{white-space:nowrap}

Answer 2

Почему вы абсолютно позиционируете тег ul?Это вызывает у вас проблему с шириной.