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

Question

这是我的菜单现在的样子:

这是我想要的样子:

现在我有以下 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，并让标签从左下角 float 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 变得更容易，因为您可以简单地将 h1float 到右边(声明它作为一个 block) 和 left

的 ul

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