Question

我正在尝试让导航栏的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>

Answer 1

您可以重新构建CSS和HTML以设置nav类的宽度。将所有链接分隔为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>

Answer 2

添加

nav li {
    text-align: right;
}

做你想要的？

Example

修改

要实现您的目标，您可以删除width声明，而是在display: inline-block元素上声明ul。然后，元素将仅延伸到其最宽内容的宽度（在这种情况下，您的li包含大 CompanyName ），而不是父元素的整个宽度。

然后，您的其他菜单将根据需要与元素的右侧对齐。

基本上是这样的：

nav ul {
    display: inline-block;
}

nav li {
    text-align: right;
}

Example

P.S。

顺便说一句，你的标记真的很奇怪，你可能应该重构它。您的菜单项都包含在一个<li>中，而每个菜单项都应该是一个单独的元素;然后，您可以通过CSS添加纯粹的表示|垂直条。

Answer 3

将带有公司名称的标签放在名为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;
  }

CSS Nav内容定位

3 个答案:

修改

P.S。