Question

我有一个我构建的导航，在导航中还有一个'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 &gt;&gt;</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;

    }

Answer 1

尝试添加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 */
}

将文本居中放在块元素中，首先，将其放在列表之外并添加text-align：

<p align="center" name="spnLockedBy" id="spnLockedBy">Profile locked by ''</p>
<ul class="nav" style="">
.
.
</ul>

#spnLockedBy{ text-align:center; margin-top:1em }

Answer 2

只需将line-height: 40px;添加到：userdetialsName类，然后将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;

    }

将p对齐到中心并跨越到li导航内的相同高度

2 个答案: