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

这是我的菜单现在的外观：
  

这是我想要的样子：
  

现在我有以下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中使用吗？

任何帮助将不胜感激。我已经盲目尝试了一段时间。

最佳答案

这非常简单，但是需要对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

之后，您只需添加所需的边距填充和其他样式即可。