0

ナビゲーションバーのセクションを右に揃えようとしてnav_rightいますが、の右側の端に揃えようとしていcompany nameます: http://i.stack.imgur.com/8xXfV.png

.nav ul並べて表示するように設定でき24.5emますが、異なる画面サイズでは機能しません。

CSSは次のとおりです。

    *{
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: inherit;
}

.nav{
    width: auto;
    padding: 2em 0 0 0.5em;
    background-color:rgba(0,0,0,1);
}

.nav ul{
    width: 24.5em;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-transform: uppercase;
}

.nav li{    
    font-weight: 100;
    font-size: 3em;
    color: #fff;
 }
.nav b{
    font-weight: 900;
}
.nav li:hover{
    text-decoration: #000;
}

#nav_right{
    font-size: 0.8em;
    font-weight: 600;
    text-align: right;
}

.triangle{
    width: 0; 
    height: 0; 
    border-top: 10px solid #000;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    margin: auto;
    opacity: 0.4;
}

img{
    float: right;
    width: 10%;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;

}

.main_wrapper{
    width: auto;
    height: 100px;
    margin-left: 1em;
    margin-top: 20%;
    overflow: hidden;
    float: left;
    background-color: #000;
    border-radius: 10px;
    opacity: 0.4;
    box-shadow: 0 0 1em #000;
}

HTML は次のとおりです。

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/test.css" />
        <title>TEST</title>
    </head>
    <body>
        <nav>
            <div class="nav">
                <ul>
                    <li id="nav_right"><a href="#">HOME</a> | <a href="#about">ABOUT</a> | <a href="#contact">CONTACT</a></li>
                    <a href="#"><li>company<b>name</b></li></a>
                </ul>
            </div>
        </nav>
    </body>
</html>
4

3 に答える 3

1

navCSS と HTML を再構築して、クラスの幅を設定できます。すべてのリンクを分割し、li余白と白い線を追加するスタイルを追加します。このようにして、アイテムをさらに追加すると、スタイルが他のリスト アイテムに自動的に適用されます。

このコードは、すべてのブラウザーで常にメニューを右端に揃えます。唯一の欠点は、リスト項目を後方に配置する必要があることです。順序を入れ替えているため、最後から最初へfloat:right。

CSS:

    * {
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
    }

    nav {
        background: #000;
    }

    .nav {
        width: 24.5em;
        padding: 2em 0 0 0.5em;
        background-color: rgba(0,0,0,1);
        font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
        text-transform: uppercase;
    }

        .nav ul {
            text-align: right;
            list-style-type: none;
        }

        .nav a {
            text-decoration: none;
            color: inherit;
            padding: 0;
        }

        .nav li {
            color: #fff;
            display: inline;
            padding: 0 6px;
            border-right: 1px solid #fff;
            font-size: 0.8em;
            font-weight: 600;
            float: right;
        }

            .nav li:first-child {
                padding-right: 0;
                border: none;
            }

            .nav li:last-child {
                padding-left: 0;
            }

        .nav #companyName {
            font-size: 3em;
            color: #fff;
        }

            .nav #companyName b {
                font-weight: 900;
            }

        .nav li:hover {
            text-decoration: underline;
        }


    .triangle {
        width: 0;
        height: 0;
        border-top: 10px solid #000;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid transparent;
        margin: auto;
        opacity: 0.4;
    }

    img {
        float: right;
        width: 10%;
        margin-top: 1em;
        margin-left: 1em;
        margin-right: 1em;
    }

    .main_wrapper {
        width: auto;
        height: 100px;
        margin-left: 1em;
        margin-top: 20%;
        overflow: hidden;
        float: left;
        background-color: #000;
        border-radius: 10px;
        opacity: 0.4;
        box-shadow: 0 0 1em #000;
    }

HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="css/test.css" />
        <title>TEST</title>
    </head>
    <body>
        <nav>
            <div class="nav">
                <ul>
                    <li><a href="#contact">CONTACT</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#">HOME</a></li>
                </ul>
                <div id="companyName">
                    <a href="#">company<b>name</b></a>
                </div>
            </div>
        </nav>
    </body>
    </html>
于 2013-10-09T15:51:42.377 に答える
0

nav という div の外側に会社名のタグを付けます。

HTML

 <html>
        <head>
            <link rel="stylesheet" href="css/test.css" />
            <title>TEST</title>
        </head>
        <body>
            <nav>
              <a href="#" class="companyname"><li>company<b>name</b>
                <div class="nav">
                    <ul>
                        <li id="nav_right"><a href="#">HOME</a> | <a href="#about">ABOUT</a> |                <a href="#contact">CONTACT</a></li>
                        </li>
                    </ul>
                </div>
            </nav>
        </body>
    </html>

CSS

    nav {
     margin: 0;
     padding: 0;
    overflow: hidden
   }
   .companyname {
      display: inline-block;
      float: left;
      margin: 0;
     padding: 0;
   }

  .nav ul{
   display: inline-block;
   float: right
   margin: 0;
   padding: 0;
  }
于 2013-10-09T14:50:15.273 に答える
0

追加しますか

nav li {
    text-align: right;
}

あなたが探しているものを行いますか？

Example

編集

width目的を達成するために、宣言を削除し、代わりdisplay: inline-blockにul要素で宣言することができます。要素は、親要素の幅全体ではなく、最も広いコンテンツ (この場合liは大きなCompanyNameを含む) の幅にのみ引き伸ばされます。

他のメニューは、必要に応じて要素の右側に配置されます。

だから基本的に：

nav ul {
    display: inline-block;
}

nav li {
    text-align: right;
}

Example

PS

ところで、あなたのマークアップは非常に奇妙で、おそらくリファクタリングする必要があります。メニュー項目はすべて 1 つの要素で囲まれています<li>が、それぞれが個別の要素である必要があります。|次に、 CSS を使用して純粋にプレゼンテーション用の垂直バーを追加できます。

于 2013-10-09T14:38:36.273 に答える