0

我试图让nav_right导航栏的部分与右侧对齐，但与右侧边缘对齐：http company name: //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

您可以重组 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>
于 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

附言

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

于 2013-10-09T14:38:36.273 回答