1

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

以下是它们应该的样子（我正在对这个站点进行一些巨大的更改，但保持布局不变）：

在此处输入图像描述

请记住，这张照片在我的页面的中心右侧，也就是说，页面向右延伸得更远，但该区域没有内容。

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

这是我当前链接中的一些代码，以了解它们的包含方式：

<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 方面的佼佼者，所以任何样式专家都可以给我一些关于如何使链接布局与屏幕截图中一样的见解吗？

4

2 回答 2

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;
}
于 2013-06-19T21:38:12.877 回答
1

这是 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>
于 2013-06-19T22:11:55.257 回答