0

嵌入的图片描述了我的布局。如您所见，问题出在我的水平菜单中。首先它是右对齐的，然后选定的选项卡没有底部边框（这会产生正面纸张效果）。如果您选择第二个选项卡，则第二个li将没有底部边框，其余部分将被连接。

问题是，如何做到这一点？我能想到的唯一解决方案是 :hover img ，它将为空白以擦除选定的底部边框。

CSS 布局预览

到目前为止的代码：

body
{
font:100% 'century gothic', Verdana, Arial, Helvetica, sans-serif;
color:#3F3F3F;
}
#wrapper
{
width:960px;
height:700px; /*temp*/
margin:0 auto;  
background:#FFF;
}

#header   /*not visible on the embedded layout*/
{
width:960px;
height:91px;
}

#nav-bar
{
width:960px;
height:50px;

border-bottom:#000070 1px solid;  
    /*
       If only <ul> has bottom border then i wouldn't have the bottom border for 
       the whole #nav-right. But this is also a problem for the selected 
       tab that doesn't have any
    */
}
#nav-left
{
    float:left;
width:73px;
height:50px;
border-right:1px #000070 solid;
}
#nav-right
{
float:left;
width:882px;
height:50px;

display:inline-block;
position:relative;  
    /*now i can use absolute on the <ul> for bottom-right positioning*/
}
#nav-right ul
{
list-style: none;
/*padding: ...  ;*/

position:absolute;
bottom:0px;
right:5px;

border-top:1px solid #000070;
border-left:1px solid #000070;
border-right:1px solid #000070;
 }
 #nav-right li 
 {
    display:inline-block;
/*padding: ...;*/
 }
 #nav-right li a 
 {
/*padding: ...;*/
text-decoration:none;
margin:0;
color:#CCC;
 }
 #nav-right li a:hover 
 {
color:#000070;
font-weight:bold;                
 }
 #content
 {
    width:960px;
clear:both;
 }
    #con-left{/*...*/}
     #con-right{/*...*/}



 HTML STRUCTURE:

<body>
<div id="wrapper">

    <div id="header"><img src="#" /></div>

    <div id="nav-bar">
        <div id="nav-left"></div>
        <div id="nav-right">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Items</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>  <!--END: nav-bar-->

    <div id="content">
        <div id="con-left"></div>
        <div id="con-right">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices semper orci in euismod. Proin sed justo at lectus dapibus <br> 
            interdum. Donec quis elit massa, id porttitor eros. Nullam vel consectetur diam. <br>
            Phasellus bibendum, justo sed vehicula luctus, velit lectus rhoncus velit, at placerat nibh sapien quis felis. Mauris id aliquet. <br>  
            Integer mattis convallis luctus. Vivamus suscipit euismod sodales. Suspendisse cursus, erat eu egestas gravida, est mi semper ,<br> 
            quis sagittis purus mi sit amet nisl. Praesent adipiscing molestie sem. Mauris vitae arcu nibh, tristique laoreet nisi. Proin quis<br>
            id sapien condimentum facilisis et at odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br>
            Morbi eget est elit, nec rutrum enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
            </p>     
        </div>
    </div>


</div><!--END: wrapper-->

关于如何为所选标签实现无底边框效果的任何建议？

我不太擅长制作小图形，如果可能的话，我想用 CSS 来做。是否涉及添加一些 div 左右都没关系。

4

2 回答 2

3

您可以添加以下CSS：

ul li:hover {
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}

因此，当您将鼠标悬停在li菜单上时，白色边框会与容器 div 的蓝色边框重叠。

示例：http: //jsbin.com/ujomi5/3

于 2011-01-17T13:19:21.820 回答
1

定义一个选定的 css 类并将其仅li应用于ul. 是否删除了ul通常应用于所有元素的边框？我假设在页面之间导航的任何机制也将能够将该 css 类添加到适当的li元素中。

当使用类选择器可能更强大时，您正在使用特定于 id 的 css 选择器。假设您有以下样式；

.nav-left { border-bottom: 1px solid black; }
.nav-selected { border-bottom: 0 solid black; color:blue; }
#nav-item-1 { background-color: red; }   
#nav-item-2 { background-color: green; }
#nav-item-2 .nav-selected { color: orange; }

如果您必须呈现输出并且不使用 jQuery 之类的框架在客户端应用样式，则可以在元素中包含多个类说明符。

<li id="nav-item-1" class="nav-left nav-selected">
<li id="nav-item-2" class="nav-left">

类属性的顺序覆盖了以前的类选择器，因此nav-selected将删除使用nav-left. 添加 id 选择器将分别为您的item-1和item-2元素提供红色上的蓝色和绿色上的橙色。

于 2011-01-17T11:02:55.830 回答