我有一个我构建的导航，在导航中还有一个"p"标签，我希望它位于导航的中心（"配置文件被"锁定"），还有一个跨度，我希望在其他导航项上具有相同的高度（"已登录"）。
代码可以在这里找到：https://dl.dropbox.com/u/107452929/nav/index.html
这里还有 HTML：
<body>
<ul class="nav" style="">
<li class="test">
<a href="#" class="parent">Home</a>
<ul>
<li>
<a href="#" class="parent">Womens</a>
<ul>
<li><a href="#">Sandals</a></li>
<li><a href="#">Sneakers</a></li>
<li><a href="#">Wedges</a></li>
<li><a href="#">Heels</a></li>
<li><a href="#">Loafers</a></li>
<li><a href="#">Flats</a></li>
</ul>
</li>
<li>
<a href="#" class="parent">Mens</a>
<ul>
<li><a href="#">Loafers</a></li>
<li><a href="#">Sneakers</a></li>
<li><a href="#">Formal</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="/about">About us</a>
</li>
<li>
<a href="/faq">FAQ</a>
</li>
<li>
<a href="/contact">Contact us</a>
</li>
<li class="">
<a href="/InvitationRequest/" class="parent">Invitation Request</a>
<ul>
<li class="">
<a href="#" class="parent">Womens</a>
<ul>
<li><a href="#">Belts</a></li>
<li><a href="#">Bags</a></li>
<li><a href="#">Jewelery</a></li>
<li><a href="#">Hats</a></li>
<li><a href="#">Eyewear</a></li>
</ul>
</li>
<li>
<a href="#" class="parent">Mens</a>
<ul>
<li><a href="#">Belts</a></li>
<li><a href="#">Hats</a></li>
<li><a href="#">Eyewear</a></li>
</ul>
</li>
</ul>
</li>
<li class="">
<a href="/cws/login">CWS Login</a>
</li>
<li class="">
<p id="spnLockedBy" name="spnLockedBy" align="center">Profile locked by ''</p>
</li>
<li class="lastTopNav">
<a href="/cws/logout">Logout >></a>
</li>
<span id="LoggedIn" class="login userdetialsName">'<b></b>' is logged-in</span>
</ul>
</body>
这是 CSS：
html, body {
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
a {text-decoration: none;}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background: #014DAA;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
position: relative;
z-index:100;
background: #014DAA;
}
.nav li li li a {
z-index:200;
border-top: 1px solid #014DAA;
background: #014DAA;
}
.lastTopNav{float:right !important;}
#spnLockedBy{
font-size:14px;
color:#f53454;
font-size:0.7em;
position: relative;
}
.userdetialsName{
position:relative;
padding:0% 1% 0% 0%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
float:right;
}
尝试添加 top，以便元素与其他元素对齐：
.userdetialsName{
position:relative;
padding:0% 1% 0% 0%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
float:right;
top: 10px; /* add top */
}
要将文本在块元素内居中，首先，将其放在列表外部并添加文本对齐：
<p align="center" name="spnLockedBy" id="spnLockedBy">Profile locked by ''</p>
<ul class="nav" style="">
.
.
</ul>
#spnLockedBy{ text-align:center; margin-top:1em }
只需将line-height: 40px;添加到：userdetialsName class，并将line-height:0px; margin:0px; padding:0px;添加到spnLockedBy id。
完整的 CSS 是：
html, body {
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
a {text-decoration: none;}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background: #014DAA;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
position: relative;
z-index:100;
background: #014DAA;
}
.nav li li li a {
z-index:200;
border-top: 1px solid #014DAA;
background: #014DAA;
}
.lastTopNav{float:right !important;}
#spnLockedBy{
font-size:14px;
color:#f53454;
font-size:0.7em;
position: relative;
line-height: 40px;
margin:0px;
padding:0px;
}
.userdetialsName{
position:relative;
padding:0% 1% 0% 0%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight:bold;
display:inline-block;
float:right;
line-height: 40px;
}