css - why the content inserted by :before put the navigation item below the normal position
The navigation bar looks like this
HOME LOGIN ABOUT
Based on suggestion on this topic: CSS - How to add dot between navigation title
I add the following css rule to append a * to the front of each item.
.twoColFixRt #nav-primary .nav li.libar:before {
content:'*';
}
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab" id="nav-home">
<a href="#"><span>HOME</span></a>
</li>
...
</ul>
</div>
</div>
Now the navigation bar looks like this
HOME * ABOUT
LOGIN
As you can see, the inserted * pushes the item below.
How to fix this issue?
Here is the complete html file for testing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edit My Profile | LinkedIn</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style TYPE="text/css">
#header {
margin-bottom:15px;
}
#header, #body, #footer {
clear:both;
margin:0 auto;
max-width:95%;
min-width:980px;
width:98em;
}
body {
background-color:#FFFFFF;
}
body {
border:0 none;
color:#000000;
font:62.5%/1.2 Arial,Helvetica,"Nimbus Sans L",sans-serif;
margin:0;
outline:0 none;
padding:0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}
#nav-utility {
margin:5px 8px;
position:relative;
text-align:right;
}
#nav-utility p {
color:#666666;
font-size:110%;
padding-right:2px;
text-decoration: none;
}
#nav-utility a {
color: #666666;
}
#nav-utility ul, #nav-utility li, #nav-utility p {
display:inline;
}
#header {
width: 970px;
margin-left: auto ;
margin-right: auto ;
}
#header ul, #header li, #header p, #header fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-utility li {
color:#666666;
font-size:110%;
padding-right:2px;
}
ol, ul {
list-style:none outside none;
}
#nav-utility ul, #nav-utility li, #nav-utility p {
display:inline;
}
#header ul, #header li, #header p, #header fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-add-connections a {
color:#006600;
}
strong {
font-weight:bold;
}
#nav-utility li:last-child {
padding-right:0;
}
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
height:39px;
padding:0 5px;
}
#logo-linkedin {
float:left;
margin:8px 10px 0 4px;
position:relative;
}
#logo-linkedin h1 a {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 0 transparent;
display:block;
height:23px;
text-indent:-12345px;
width:88px;
}
a {
color:#006699;
outline:medium none;
text-decoration:none;
}
a:hover 开发者_StackOverflow社区{
text-deoration: underline
}
#nav-primary ul, #nav-primary li, #nav-primary p, #nav-primary fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-primary .nav li.tab {
float:left;
font-size:130%;
font-weight:bold;
line-height:36px;
margin:1px 0 0;
}
#nav-primary .nav a, #nav-primary .nav a:visited, #header #nav-primary .nav li li a, #header #nav-primary .nav li li a:visited {
color:#006699;
text-decoration:none;
}
#nav-primary .nav a span {
display:block;
padding:0 10px;
font-size: 15px;
}
#nav-primary .nav li.libar:before {
content:'*';
}
</style>
</head>
<body>
<div class="member" id="header">
<div class="wrapper">
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab libar" id="nav-primary-home">
<a href="/home?trk=hb_tab_home"><span>Home</span></a>
</li>
<li class="tab libar" id="nav-primary-profile">
<a href="/myprofile?trk=hb_tab_pro"><span>Profile</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you
Edited version posted here: http://jsfiddle.net/bDpUM/1/
Next time, try to take note of how they did it and write your own code to replicate it, instead of randomly splicing in other website's codes into your own and end up with the sort of monstrosity you have posted up there.
加载中,请稍侯......
精彩评论