Question

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

我的代码 家我的工作关于我取得联系

            </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

尝试将<h1>Document Main Header, via the h1 tag.</h1> <div id="kybdgrd"> <div id="kybdTryPxfixed-01-01" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-02-01" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-03-01" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-04-01" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-01-02" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-02-02" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-03-02" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-04-02" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-01-03" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-02-03" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-03-03" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-04-03" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-01-04" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-02-04" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-03-04" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> <div id="kybdTryPxfixed-04-04" class="kybd-tries-pxfixed"><img src='data:image/svg+xml;charset=UTF-8,<svg id="svgId99" xmlns="http://www.w3.org/2000/svg" version="1.1" x="50" y="50" width="100%" height="100%" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" stroke="black" stroke-width="20" fill="red" /></svg>' alt="Just a sample resize test." width="100%" /></div> </div> <p> Some foobar text. </p> <p> This is a foobar paragraph. </p>添加到white-space:nowrap;

.menu a

导航菜单图标html

1 个答案: