1

私が作成したナビゲーションがあります。ナビゲーションには、nav("Profile locked by ''") の中央に配置したい「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;

    }
4

2 に答える 2

2

要素が他の要素と整列するように 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 }
于 2012-11-12T10:02:02.617 に答える
1

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;

    }
于 2012-11-12T10:09:32.080 に答える