Question

我在MVC应用的布局页面顶部有几组链接，但我无法正确定位这些链接。

这是他们应该看起来的样子（我正在对这个网站做一些大的改动，但保持布局完整）：

enter image description here

请注意，这张照片位于我页面的中间右侧，也就是说，该页面向右延伸，但该区域内没有任何内容。

将这些基于图像的链接更改为基于文本的链接后，它们会失去样式完整性和争夺性。

以下是我当前链接中的一些代码，以了解它们是如何被包含的：

<div class="top-links">
    <div id="top-nav">
        <a class="top-link" href="#" title="My Profile">
            <span>MY PROFILE</span>
        </a>
        <a class="top-link" href="#" title="Account Profile">
            <span>ACCOUNT PROFILE</span>
        </a>
        <a class="top-link" href="#" title="Sign Out">
            <span>SIGN OUT</span>
        </a>
    </div>
</div>
<div class="links">
    <div id="nav">
        <a class="home-link home-link-left" href="#" title="My Component Books">
            <span>MY COMPONENT BOOKS</span>
        </a>
        <a class="home-link" href="#" title="New Component Book">
            <span>NEW COMPONENT BOOK</span>
        </a>
        <a class="home-link" href="#" title="System Logs">
            <span>SYSTEM LOGS</span>
        </a>
    </div>
</div>

为了便于阅读，我遗漏了部分标签。

最后，相关的CSS：

/*----------- TOP NAVIGATION -----------*/
.top-links {
    float: right;
    height: 31px;
    margin: 0 0 0 0;
    width: auto
}

.top-link {
    font: 7pt Georgia, serif;
    color: #E1915C;
    text-align:center;
    text-decoration: none;
    line-height: 34px;
    padding: 10px;
}

#top-nav {
    float: right;
    margin: 0 0 0 0;
    overflow: hidden;
}

/*----------- NAVIGATION -----------*/
.links {
    float: right;
    width: auto;
    height: 36px;
    overflow: hidden;
    bottom: 0;
    right: 0;
}

.home-link {
    font: 7.25pt Georgia, serif;
    color: #E1915C;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #E1E1E1;
    text-align: center;
    line-height: 36px;
    width: auto;
    padding: 10px;
}

    .home-link:hover {
        color: #369AAA;
    }

.home-link-left {
    border-left: 1px solid #E1E1E1;
}

.home-link-right {
    border-right: 1px solid #E1E1E1;
}

#nav {
    position: absolute;
    float: right;
    overflow: hidden;
}

很抱歉，如果它看起来有点多，有些不是我的原始代码，我不确定我应该/不应该包括什么。

我不是最好的CSS，所以任何造型专家都能给我一些洞察力，让我了解如何使链接布局，因为它们在截图中？

Answer 1

看看这是不是你想要的：http://jsfiddle.net/derekstory/cHnXx/

/*----------- TOP NAVIGATION -----------*/

.top-links {
    height: 31px;
    margin: 0 0 0 0;
    width: auto;

}
.top-link {
    font: 7pt Georgia, serif;
    color: #E1915C;
    text-align:center;
    text-decoration: none;
    line-height: 34px;
    padding: 10px;
}
#top-nav {
    float: right;
    margin: 0 0 0 0;
    overflow: hidden;
}
/*----------- NAVIGATION -----------*/
 .links {
    whitespace: nowrap;
    min-width:  120px;
    float: right;   
    height: 36px;
}
.home-link {
    font: 7.25pt Georgia, serif;
    color: #E1915C;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #E1E1E1;
    text-align: center;
    line-height: 36px;
    width: auto;
    padding: 10px;
}
.home-link:hover {
    color: #369AAA;
}
.home-link-left {
    border-left: 1px solid #E1E1E1;
}
.home-link-right {
    border-right: 1px solid #E1E1E1;
}
#nav {
    position: absolute;
    float: right;
    overflow: hidden;
}

Answer 2

这是jsFiddle：http://jsfiddle.net/FVjhQ/2/

<强> CSS

#profile-nav {
     margin-bottom: 25px;
}
.nav-container,
.nav-container li {
     margin: 0;
     padding: 0;
}
.nav-container {
     clear: right;
     float: right;
}
.nav-container li {
     border-left: 1px solid #E1E1E1;
     float: left;
     list-style: none;
     line-height: 36px;
}
.nav-container a {
     font: 7.25pt Georgia, serif;
     color: #E1915C;
     text-decoration: none;
     font-weight: bold;
     padding: 10px;
     text-transform: uppercase;
}
.nav-container a:hover {
     color: #369AAA;
}
.nav-container .last-link {
     border-right: 1px solid #E1E1E1;
}
.no-border li {
     border: 0;
}

<强> HTML

<ul id="profile-nav" class="nav-container no-border">
    <li>
        <a href="#" title="My Profile">My Profile</a>
    </li>
    <li>
        <a href="#" title="Account Profile">Account Profile</a>
    </li>
    <li>
        <a href="#" title="Sign Out">Sign Out</a>
    </li>
</ul>

<ul id="component-nav" class="nav-container">
    <li>
        <a href="#" title="My Component Books">My Component Books</a>
    </li>
    <li>
        <a href="#" title="New Component Books">New Component Books</a>
    </li>
    <li>
        <a href="#" title="Notifications">Notifications</a>
    </li>
    <li class="last-link">
        <a href="#" title="System Logs">System Logs</a>
    </li>
</ul>

将<div>与父<div>的右下角对齐？</div> </div>

2 个答案: