Question

我正在努力制作各种菜单。

代码可在此处获得： http://jsfiddle.net/Chumillas/WyA3U/ （谢谢Chumillas教我这个）

如果您通过上面的链接检查结果，您会发现此代码存在设计问题 - 所有可见菜单项必须具有相同的长度（75px），这看起来并不美观它们之间的距离不均匀：

.titleCell
{
    width: 75px;

如何修复它以使长度实际上是内容的长度（+填充），而不是必须将其修复为75px，以便菜单项之间的距离是相同的？< / p>

编辑 -

如果无法完成，我会很高兴在线链接到类似的东西。 thnx再次

编辑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

虽然您已经接受了答案，但我已经对您的小提琴进行了更新，并提供了一些您可能希望实施的布局修复。

查看：http://jsfiddle.net/WyA3U/3/

Answer 3

My two cents - 更清洁/更少的两个世界：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

请提供css尺寸修复

3 个答案: