Question

enter image description here

^^以上图片显示= 900px，> 900px，<900px ......我只想在窗口收缩时居中并缩短填充。（15px）

enter image description here

^^使用1.666666666666666％

现在我正试图让我的网页导航栏工作时宽度发生变化。当窗口正好是900px时，导航栏非常适合。我在每个块周围有30px的间距（左右15px; 15px开始和结束列表）。我拿了900并除以60得到15px，这是我的百分比（％/ 60）。当我使用公式calc（1/60 * 100％）时，导航栏的间距错误。我误解了什么。

我不认为这是google chrome问题，假设上述逻辑有问题。如果有人需要，我可以发布html文件。不知道是否有必要。

   body {
        margin:0px;
        font-family:avenir, sans-serif;
    }
    .nav {
        margin: 0px 0px 0px 0px;
        overflow:hidden;
        width:100%;
        <!--box-shadow: 0px 0px 10px 0px #000000;-->
    }
    .link-header {
        background-color:rgb(242,242,235);
    }
    .school-header {
        background-color:rgb(40,110,123);
    }
    .nav-left {
        display: inline-block;
        float:left;
    }
    .nav-right {
        display: inline-block;
        float:right;
    }<!--
    .nav-center {
        text-align: center;
    }-->
    a {
        text-decoration: none;
    }
    .school-header a {
        color:white;
    }
    .link-header a {
        color:rgb(40,40,40);
    }
    .nav-li-outer {
        padding-left:calc(1/60*100%);
        padding-right:calc(1/60*100%);
        display: inline-block;
        margin-top: 0px;
        vertical-align: top;
    }
    .school-header li {
        line-height:80px;
    }
    .link-header li {
        line-height:30px;
    }
    .link-header li:hover {
        box-shadow:inset 0 -3px   0 rgb(40, 40, 40);
    }
    ul {
        margin: 0;
        list-style-type: none;
        padding-left: calc(1/60*100%);
        padding-right:calc(1/60*100%);
    }

HTML：

<html>
    <head>
        <link rel="stylesheet" href="kamsc.css">
    </head>
    <body>
        <div class="school-header">
            <div class="nav">
                <div class="nav-left">
                    <ul>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    <img src="Logo-Test.png" width=600px style="vertical-align:middle">
                                </li>
                            </div>
                        </a>
                    </ul>
                </div>
                <div class="nav-right">
                    <ul>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Login
                                </li>
                            </div>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
        <div class="link-header">
            <div class="nav">
                <div class="nav-left">
                    <ul>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Home
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    KAMSC
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Staff
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Admissions
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Curriculum
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Sizzling Summer
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    KAMSC Connection
                                </li>
                            </div>
                        </a>
                        <a href="#">
                            <div class="nav-li-outer">
                                <li>
                                    Alumni
                                </li>
                            </div>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

您可以非常简单地使用HTML，尤其是导航部分。这是一个JSFiddle：http://jsfiddle.net/vanu2ynx/

我没有完全重新创建你想要做的事情，但你可以填写详细信息。

这是我使用的HTML：

<header>
    <h1>Title</h1>
    <div class="login">Login</div>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">KAMSC</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Adminssions</a></li>
        <li><a href="#">Curriculum</a></li>
        <li><a href="#">Sizzling Summer</a></li>
        <li><a href="#">KAMSC Connection</a></li>
        <li><a href="#">Alumni</a></li>
    </ul>
</nav>

CSS：

header {
    background: teal;
    overflow: hidden;
    padding: 2% 2%;
}

header h1 {
    float: left;
    margin: 0;
    padding: 0;
}

header .login {
    float: right;
}

nav {
    background: lightgray;
    padding: 2% 2%;
}

nav ul {
    font-size: 0;
    margin: 0;
    padding: 0;
    text-align: justify;
}

nav ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

nav li {
    display: inline-block;
    font-size: 16px;
}

这里的诀窍是text-align: justify;上的nav ul，然后:after会创建一个全宽子元素，以证明其有效。

您需要添加媒体查询才能正常使用此功能，但这应该非常简单。

在此处阅读更多内容：How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

HTML页面导航栏 - 间距问题与百分比

1 个答案: