请确定css大小

问题描述

| 我正在尝试制作各种菜单。 该代码在这里可用： http://jsfiddle.net/Chumillas/WyA3U/ （感谢丘米拉丝（Chumillas）教给我这方面的知识） 如果通过上面的链接检查结果，则会发现此代码存在设计问题-所有可见的菜单项必须具有相同的长度（75px），并且由于它们之间的距离不均匀而看起来没有美化：

.titleCell
{
    width: 75px;

我该如何解决这个问题，以便长度实际上是内容的长度（+填充），而不是必须将其修复为75px，以便菜单项之间的距离相同？ 编辑- 如果无法完成，我将很高兴能够在线链接到类似的内容。再次感谢 编辑2- 如果有人想知道我最初是从哪里得到这东西的：http://www.devinrolsen.com/css-hide-and-display-content/     

解决方法

        您可以从

.titleCell strong

中删除

position:absolute

，然后将

padding-left

更改为具有更大值的value4ѭ，例如

40px

。还要从

.titleCell

中取出

width

这里是一个演示：http://jsfiddle.net/ktCb8/ 建议，不要对

strong

标签应用规则。设置父项

div

或父项

li

的样式。     ,        尽管您已经接受了答案，但我还是对Fiddle进行了更新，其中提供了一些可能要实现的布局修复。 看看：http://jsfiddle.net/WyA3U/3/     ,        我的两分钱-两全其美：

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