导航栏中的项目对齐方式

时间：2018-06-27 21:38:44

标签： html5 css3

我正在使用w3schools的HTML5和CSS重新设计我们组织的公共网站。我目前在中心有一个徽标，我希望其底部与灰色导航栏的底部对齐。当网站以响应模式（小于1000像素宽）显示时，在显示真棒5菜单栏时我也遇到问题。我不确定要应用哪些CSS规则才能使所有这些工作正常...

JSFiddle Initial

更新1

通过向带有徽标的col增加高度并在大徽标上设置位置，我能够产生想要的东西。如果有更好的方法，请告知。

不，我只需要帮助即可在屏幕尺寸小于1000像素时显示条形图。

JSFiddle with Update 1 

<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gugi|Lato|Raleway|Roboto|Roboto+Condensed">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<style>
    body {
        /* font-family: 'Gugi', cursive; */
        font-family: 'Roboto', sans-serif;
        /* font-family: 'Roboto Condensed', sans-serif; */
        /* font-family: 'Lato', sans-serif; */
        /* font-family: 'Raleway', sans-serif; */
        /* font-family: palatino, helvetica, sans-serif; */
        /* font-family: "Segoe UI", Arial, sans-serif; */
        background: #C6CCD0!important;
    }

    .w3-content {
        max-width: 1200px;
    }

    #banner {
        background-color: #022a3a;
    }

    ul.breadcrumb {
        padding: 2.5px 4px;
        list-style: none;
        background-color: transparent;
        display: inline-block;
        line-height: 0.85;
    }

    ul.breadcrumb li {
        display: inline;
        font-size: 10px;
    }

    ul.breadcrumb li+li::before {
        padding: 4px;
        color: #fffef9;
        /* content: "/\00a0"; */
        content: ">";
    }

    ul.breadcrumb li a {
        color: #fffef9;
        text-decoration: none;
    }

    ul.breadcrumb li a:hover {
        color: #e8b00f;
        font-weight: 900;
        text-decoration: underline;
    }

    ul.social {
        padding: 5px 8px;
        list-style: none;
        background-color: transparent;
    }

    ul.social li {
        color: #fffef9;
        display: inline;
        font-size: 16px;
    }

    ul.social li+li::before {
        padding: 4px;
        color: #fffef9;
        /* content: "/\00a0"; */
    }

    ul.social li a {
        color: #fffef9;
        text-decoration: none;
    }

    ul.social li a:hover {
        color: #e8b00f;
        text-decoration: underline;
    }

    #logo {
        float: left;
        margin: 0 0 0 25px;
    }

    .gbl-logo {
        display: inline-block;
        height: 78px;
        width: 180px;
        outline: none;
        background: transparent url("http://www.navy.mil/imgs/americas-navy-globe.png") no-repeat 0 0;
        cursor: pointer;
        /* text-indent: -9000px; */
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }

    #___gcse_0 {
        float: right;
        width: 75%;
    }

    .gsc-control-cse {
        /* font-family: Arial, sans-serif; */
        border-color: #022a3a!important;
        background-color: #022a3a!important;
    }

    .gsc-search-button-v2,
    .gsc-search-button-v2:focus {
        border-color: #C6CCD0!important;
        background-color: #0076a9!important;
        background-image: none;
        filter: none;
    }

    .gsc-search-button-v2:hover {
        border-color: #C6CCD0!important;
        background-color: #e8b00f!important;
        background-image: none;
        filter: none;
    }

    #navbar {
        height: 38.5px;
    }

    .loc-logo {
        width: 100px;
        /* height: 125px; */
        /* position: absolute; */
        /* bottom: 0; */
        margin: 0 auto;
        display: block;
    }
</style>

<body>
    <!-- Start Banner and Navbar -->
    <div class="w3-top">
        <div id="banner" class="w3-hide-small w3-hide-medium">
            <div class="w3-content">
                <div class="w3-row">
                    <div class="w3-col m8 l9">
                        <!-- Start Sit Collection Breadcrumbs -->
                        <ul class="breadcrumb">
                            <li><a href="#">Commander, Naval Surface Force, U.S. Pacific Fleet (COMNAVSURFPAC)</a></li>
                            <li><a href="#">Commander, Naval Surface Group, Western Pacific (COMNAVSURFGRUWP)</a></li>
                            <li><a href="#">Commander, Amphibious Squadron ELEVEN (COMPHIBRON 11)</a></li>
                            <li><a href="#">USS Ashland (LSD 48)</a></li>
                        </ul>
                        <!-- End Sit Collection Breadcrumbs -->
                    </div>
                    <div class="w3-col m4 l3">
                        <!-- Start Social Media Links -->
                        <ul class="social">
                            <li>Follow Us On:</li>
                            <li><a href="#" title="Follow Us On Facebook"><i class="fab fa-facebook-square"></i></a></li>
                            <li><a href="#" title="Follow Us On Twitter"><i class="fab fa-twitter-square"></i></a></li>
                            <li><a href="#" title="Follow Us On Flickr"><i class="fab fa-flickr"></i></a></li>
                            <li><a href="#" title="Follow Us On Wordpress"><i class="fab fa-wordpress"></i></a></li>
                            <li><a href="#" title="Follow Us On Youtube"><i class="fab fa-youtube-square"></i></a></li>
                        </ul>
                        <!-- End Social Media Links -->
                    </div>
                </div>
                <div class="w3-row">
                    <!-- Start Site Logo -->
                    <h1 id="logo">
                        <a class="gbl-logo" href="#" title="Commander, Naval Surface Force, U.S. Pacific Home Page">
                            <span>Commander, Naval Surface Force, U.S. Pacific Home Page</span>
                        </a>
                    </h1>
                    <!-- Start Site Logo -->
                </div>
            </div>
        </div>
        <div class="w3-content">
            <div id="navbar" class="w3-bar">
                <div class="w3-row">
                    <div class="w3-col l5">
                        <!-- Start Global (Left) Navbar -->
                        <div class="w3-left w3-hide-small w3-hide-medium">
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                        </div>
                        <!-- End Global (Left) Navbar -->
                    </div>
                    <div class="w3-col l2 s3 m6">
                        <a class="w3-hide-large w3-left" href="#home">
                            <img style="width: 30px; margin: 0 10px; display: block;" src="https://www.public.navy.mil/surfor/crests/ashland_med.gif" />
                        </a>
                        <a class="w3-hide-small w3-hide-medium" href="#home">
                            <img style="width: 100px; margin: 0 auto; display: block;" src="https://www.public.navy.mil/surfor/crests/ashland_med.gif" />
                        </a>
                    </div>
                    <div class="w3-col l5">
                        <!-- Start Local (Right) Navbar -->
                        <div class="w3-right w3-hide-small w3-hide-medium">
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                            <a class="w3-bar-item w3-button" href="#about">ABOUT</a>
                        </div>
                        <!-- End Local (Right) Navbar -->
                    </div>
                    <div class="w3-col s1 m3">
                        <!-- Hide Navbars and Display Menu Icon -->
                        <a class="w3-bar-item w3-button w3-right w3-hide-large" href="javascript:void(0)" onclick="w3_open()">
                            <i class="fa fa-bars"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

1 个答案:

答案 0 :(得分：4)

基本上，您的fa bars图标可正确呈现，但是将其向下推到导航栏范围之外的下一行。

enter image description here

为解决此问题，我做了几件事。首先，我将所有hide-medium，hide-small和hide-large类移到列级。即使隐藏其中的内容，也可以防止渲染整个列。其次，我将大图标和小图标移到了自己的列中（同样，现在我们可以隐藏整个列而不是其中的一部分）。然后，我调整了小图标的列大小。所有这些使菜单图标可以在导航栏的边界内呈现。

https://jsfiddle.net/vquagfh1/27/

enter image description here 

<div id="navbar" class="w3-bar">
    <div class="w3-row">
      <div class="w3-col l5">
        ...
      </div>
      <div class="w3-col l1 s1 m1 w3-hide-large" style="height: 38.5px;">
        ...
      </div>        
      <div class="w3-col l2 s3 m6 w3-hide-small w3-hide-medium" style="height: 38.5px;">
        ...
      </div>       
      <div class="w3-col s1 m1 w3-hide-large">
        <!-- Hide Navbars and Display Menu Icon -->
        <a class="w3-bar-item w3-button w3-right" href="javascript:void(0)" onclick="w3_open()">
          <i class="fa fa-bars"></i>
        </a>
      </div>
      <div class="w3-col l5 w3-hide-small w3-hide-medium">
        ...
      </div>
    </div>
  </div>
相关问题
最新问题