Question

以下是我的菜单现在的样子：
alt text

以下是我希望它的外观：
alt text

现在我有以下css：

#menu
{
    position:relative;
    width: 940px;   
    height:90px;

}

#menuItem
{
    position: absolute;
    bottom: 0px;
    padding-left: 50px;
    float: left;
    width: 600px;
}

.titleText
{
    float: right;
    color:#209202;
    font-size:22px;
    font-style:italic;
    font-family:Georgia;
    font-weight:bold;
}

以下HTML：

<div id="titleBar">

        <div id="menu">
            <div id="menuItem">


<ul class="tabs">
    <li><a href="/dashboard/">

        <img alt="Dashboard" src="/Content/Images/Dashboard_green.png" />
        </a>
    </li>
    <li><a href="/placements/">

        <img alt="Place Accounts" src="/Content/Images/Place_Accounts_white.png" />
        </a>
    </li>
    <li><a href="/messages">

        <img alt="Messages" src="/Content/Images/Messages_white.png" />
        </a>
    </li>
    <li><a href="/reports">

        <img alt="Reports" src="/Content/Images/Reports_white.png" />
        </a>
    </li>
    <li><a href="/admin">

        <img alt="Admin" src="/Content/Images/Admin_white.png" />
        </a>
    </li>
</ul>

            </div>
              <div class="titleText">

        Dashboard

        </div> 
        </div>

    </div>

我尝试了一百万种不同的东西，从右侧获得了titleText 40px，从顶部获得了50px，并且标签从左下角浮动了40px，但是我尝试的所有内容都让我关闭但是后来无法工作IE7出于某种原因。

菜单代表整个灰条区域。 menuItem是标签。 titleText是表示“仪表板”的绿色字。

我应该设置menuItem，menu和titleText的样式，以便它显示如下正确的图像并仍可在IE7中使用？

非常感谢任何帮助。我一直在盲目地尝试这段时间。

Answer 1

这很简单，但需要对html进行少量更改，因为您需要将信息中心文字放在菜单上方。

你需要考虑这种代码：


<div id="mainmenu">
    <h1>Dashboard</h1> 
    <ul>
        <li><a href="/dashboard/"><img alt="Dashboard" src="/Content/Images/Dashboard_green.png" /></a></li>
        <li><a href="/placements/"><img alt="Place Accounts" src="/Content/Images/Place_Accounts_white.png" /></a></li>
        <li><a href="/messages"><img alt="Messages" src="/Content/Images/Messages_white.png" /></a></li>
        <li><a href="/reports"><img alt="Reports" src="/Content/Images/Reports_white.png" /></a></li>
        <li><a href="/admin"><img alt="Admin" src="/Content/Images/Admin_white.png" /></a></li>
    </ul>
</div>

这样可以让您更轻松地制作CSS，因为您只需float h1到right（将其声明为block）并且ul到left

在此之后，您可以简单地添加所需的边距填充和其他存储。

Answer 2

我会使用绝对定位（左，上）或浮点数（padding-left，padding-top，float：left）;不是两者的结合。

顺便说一句：这不仅适用于菜单，也适用于右侧的标题。

Answer 3

从#menuitem移除位置：绝对，并向#menu

添加顶部填充

#menu
{
    position:relative;
    width: 940px;       
    height:40px;  /* remember that height + padding = total height */
    padding-top:50px; /* adjust as necessary to push the tabs and text down */
}

#menuItem
{
    padding-left: 50px;
    float: left;
    width: 600px;
}

Answer 4

对于titleText div，你应该能够给它保证金......

.titleText
{
    float: right;
    color:#209202;
    font-size:22px;
    font-style:italic;
    font-family:Georgia;
    font-weight:bold;
    margin: 50px 40px 0 0;
}

如果您还不知道，当您列出4个保证金参数时，它们被指定如下......

保证金：最右下方

关于Joel Potter的答案，我必须同意，从#menuItem中删除绝对定位，但是，您不再需要position: relative指定#menu。< / p>

它唯一的目的似乎是保持#menuItem相对于#menu，但如果没有绝对定位，现在就没有必要了。

如何使用CSS正确排列这些元素？

4 个答案: