带有图标 html 的导航菜单

Question

尝试使用 html 中的图标制作响应式导航菜单。它应该看起来像“图像 1”，但它看起来像“图像 2”。关于如何解决它的任何想法？它工作正常，但是当我在导航菜单中添加图标时，它出错了。提前致谢。

我的代码 家 我的工作 关于我 联系方式

            </ul>

            <a class="toggle-nav" href="#">&#9776;</a>


        </nav>

        <style>
        .icons1 {
            width: 40px;
            height: 30.5px;
            margin-left: 38px;
            background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
            background-size: contain;
            margin-top: 15px;
            float: left;

        }


        .current-item{
            width: 40px;
            height: 30.5px;
            margin-top: 30px;
            background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat;
            background-size: contain;


        }
        /*----- Toggle Button -----*/
        .toggle-nav {
            display:none;
        }

        /*----- Menu -----*/
        @media screen and (min-width: 860px) {
            .menu {
                width:100%;
                height:100px;
                box-shadow:0px 1px 1px rgba(0,0,0,0.15);
                border-radius:3px;
                background:#303030;

            }
        }

        .menu ul {
            display:inline-block;

                margin-top:10px;
                height:90px;
        }

        .menu li {
            margin:0px 50px 0px 0px;
            float:left;
            list-style:none;
            font-size:17px;

            margin-top:10px;
            height:70px;
        }

        .menu li:last-child {
            margin-right:0px;
        }

        .menu a {
            text-shadow:0px 1px 0px rgba(0,0,0,0.5);
            color:#777;
            transition:color linear 0.15s;
            text-decoration: none;

            line-height:6;
        }

        .menu a:hover, .menu .current-item a {
            text-decoration:none;
            color:#66a992;

        }



        /*----- Responsive -----*/
        @media screen and (max-width: 1150px) {
            .wrap {
                width:90%;
            }
        }

        @media screen and (max-width: 970px) {
            .search-form input {
                width:120px;
            }
        }

        @media screen and (max-width: 860px) {
            .menu {
                position:relative;
                display:inline-block;
                width:100%;
                text-align:center;
        background-color:red;
            }

            .menu ul.active {
                display:none;
            }

            .menu ul {
                width:100%;
                position:absolute;
                top:120%;
                left:0px;
                padding:10px 0px;
                box-shadow:0px 1px 1px rgba(0,0,0,0.15);
                border-radius:3px;
                background:#303030;
            }




            .menu ul:after {
                width:0px;
                height:0px;
                position:absolute;
                top:0%;
                left:22px;
                content:'';
                transform:translate(0%, -100%);
                border-left:7px solid transparent;
                border-right:7px solid transparent;
                border-bottom:7px solid #303030;
            }

            .menu li {
                margin:5px 0px 5px 0px;
                float:none;
                display:block;
            }

            .menu a {
                display:block;

            }

            .toggle-nav {
                padding:20px;
                float:left;
                display:inline-block;
                box-shadow:0px 1px 1px rgba(0,0,0,0.15);
                border-radius:3px;
                background:#303030;
                text-shadow:0px 1px 0px rgba(0,0,0,0.5);
                color:#777;
                font-size:20px;
                transition:color linear 0.15s;
            }

            .toggle-nav:hover, .toggle-nav.active {
                text-decoration:none;
                color:#66a992;
            }

            .search-form {
                margin:12px 0px 0px 20px;
                float:left;
            }

            .search-form input {
                box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
            }
        }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script>

        jQuery(document).ready(function() {
            jQuery('.toggle-nav').click(function(e) {
                jQuery(this).toggleClass('active');
                jQuery('.menu ul').toggleClass('active');

                e.preventDefault();
            });
        });
        </script>   

Answer 1

尝试将white-space:nowrap; 添加到.menu a

.menu a {
    text-shadow:0px 1px 0px rgba(0,0,0,0.5);
    color:#777;
    transition:color linear 0.15s;
    text-decoration: none;
    line-height:6;
    white-space:nowrap;
}