Требуется исправить размер CSS, пожалуйста

Question

Я пытаюсь составить своеобразное меню.

код доступен здесь: http://jsfiddle.net/Chumillas/WyA3U/ (спасибо, Чумильяс, за то, что научили меня этому)

, если вы проверитеВ результате, перейдя по ссылке выше, вы увидите, что в этом коде есть проблема дизайна - все видимые пункты меню должны иметь одинаковую длину (75 пикселей) , и это не выглядит украсившим, поскольку расстояния между ними неравны :

.titleCell
{
    width: 75px;

как я могу исправить это так, чтобы длина соответствовала содержанию (+ заполнение) вместо того, чтобы фиксировать его на 75px, чтобы расстояние между пунктами менюТЕМ ЖЕ ?

• edit -

, если это не может быть сделано, я был бы счастлив со ссылкой на аналогичную вещь онлайн.спасибо еще раз

• изменить 2 -

, если кто-то задается вопросом, откуда я взял эту вещь первоначально: http://www.devinrolsen.com/css-hide-and-display-content/

Answer 1

Вы можете удалить position:absolute из .titleCell strong и изменить padding-left на padding-right с большим значением, например, 40px.Также удалите width из .titleCell

Здесь демонстрационная версия: http://jsfiddle.net/ktCb8/

В качестве совета не применяйте правила для тега strong.Стиль родительский div или родительский li.

Answer 2

Мои два цента & mdash; чище / меньше обоих миров:

#contentBox { position: relative; font-size: 80%; }
#contentBox > li
{
    display: inline;
    padding: 6px;
    margin: 0 1px;
    cursor: pointer;
}
#contentBox > li:hover, #contentBox ul
{
    border: 1px solid #CCC;
    background-color: #FFF;
}
#contentBox > li:hover {
    border-bottom-color: #FFF;
    margin: 0;
}
#contentBox > li:hover ul
{
    display: block;
}
#contentBox ul
{
    position: absolute;
    display: none;
    border-width: 1px;
    width: 500px;
    padding: 6px;
    cursor: default;
    margin-top: 6px;
    z-index: -1;
}

<ul id="contentBox">
    <li>
        Go
        <ul>
            <li>
                <h1>
                    Quickly jump to your desired location
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Messages
        <ul>
            <li>
                <h1>
                    Access personal and system messages and alerts
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Assets
        <ul>
            <li>
                <h1>
                    Manage your assets
                </h1>
                Lorem ipsum dolor sit amet. </li>
        </ul>
    </li>
    <li>
        Support
        <ul>
            <li>
                <h1>
                    Need help?
                </h1>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
        </ul>
    </li>
</ul>

Answer 3

Хотя вы уже приняли ответ, я обновил ваш Fiddle с некоторыми исправлениями макета, которые вы, возможно, захотите внедрить.

Посмотрите на: http://jsfiddle.net/WyA3U/3/