如何让我的div标签中的所有元素在改变大小时负责（放大缩小）？

问题描述 投票：0回答：1

我的顶部导航栏在中间，当放大时，它保持在那里，但图片（标志）和门票的东西没有。就像你可以看到每一个东西都是相对的位置。也试过margin auto，margin-left和margin-right auto，但它就是不在那里。也试过把div放在中间，但也不行。感谢所有的帮助。)

body{
    margin: 0;
}


#header{
    background-color: #a61b2b;
    display: grid;
    grid-template-columns: 20% 80%;
    height: 120px;
    align-content: center;
    justify-content: flex-end
}

#topnav li{
    margin: 0px 5px;
}

#topnav{
    position: relative;
    top: 40px;
    right: 460px;
    font-family: 'Open Sans',arial,sans-serif;
    color: #f2f2f2;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: bold;
    list-style: none;
    display: flex;
    margin: auto;
}

#topnav a:hover {
    background-color: #eb0627;
}

#topnav a{
    text-decoration:none;
    color: #fff
}

#topnav li:hover ul{
    display: block;
    list-style: none;
    background: black;
    color: #fff;
    padding: 10px;
    position: absolute;
    left: 0;
}

#topnav li ul li{
    margin: 10px 0px;
}

#logo{
    position: relative;
    left: 500px;
    width: 55%;
}

#tickets{
    position: relative;
    left: 450px;
    background-color: black;
}


.hidden{
    display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Granada Club de Fútbol | Granada </title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="scripts.js"></script>
</head>
<body>
<div id="header">
    <img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
    <ul id="topnav">
        <li><a href="#">NEWS</a>
            <ul class="hidden">
                <li><a href="#">CLUB</a>
                </li>
                <li><a href="#">FIRST TEAM</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">THE CLUB</a>
            <ul class="hidden">
                <li><a href="#">CLUB INFORMATION</a>
                </li>
                <li><a href="#">STRUCTURE</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">FIRST TEAM</a>
            <ul class="hidden">
                <li><a href="#">SQUAD </a></li>
                <li><a href="#">TRAINING</a></li>
            </ul>
        </li>
        <li><a href="#">TEAMS</a>
            <ul class="hidden">
                <li><a href="#">GRANADA B </a></li>
                <li><a href="#">GFC LADIES</a></li>
            </ul>
        </li>
        <li><a href="#">GRANADA TV</a>
        </li>
        <li><a id="tickets" href="#">TICKETS</a>
        </li>
    </ul>
</div>
</body>
</html>
html css web header
1个回答
0
投票

对于每个人都有一个类似的问题，我发现了一个解决方案。只要做一个第二个div标签下的标题标签有一个固定的与和margin左和右的自动，这使得一个div标签在中间不会移动。

下面是我修复它的代码。

        body{
            margin: 0;
        }

        a{
            transition: all .25s;
        }

        #header{
            background-color: #a61b2b;
            display: flex;
            grid-template-columns: 20% 80%;
            height: 110px;
            align-content: center;
            justify-content: flex-end;
        }

        #h2{
            width: 975px;
            margin-left: auto;
            margin-right: auto;
            padding-top: 6px;
        }

        #topnav li{
            margin: 0px 5px;
        }

        #topnav{
            position: relative;
            font-family: 'Open Sans',arial,sans-serif;
            color: #f2f2f2;
            padding: 14px 16px;
            font-size: 12px;
            font-weight: bold;
            list-style: none;
            display: flex;
            margin: auto;
        }

        #topnav a:hover {
            background-color: #eb0627;
        }

        #topnav a{
            text-decoration:none;
            color: #fff
        }

        #topnav li:hover ul{
            display: block;
            list-style: none;
            background: black;
            color: #fff;
            padding: 10px;
            position: absolute;
            left: 0;
        }

        #topnav li ul li{
            margin: 10px 0px;
        }

        #logo{
            position: relative;
            width: 20%;
        }

        #tickets{
            position: relative;
            left: 480px;
            background-color: #343434;
            padding: 8px;
        }

        #search{
            position: relative;
            top: -30px;
            left: 650px;
            width: 20px;
        }

        #fb{
            padding-right: 5px;
            width: 10px;
        }

        .hidden{
            display:none;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Granada Club de Fútbol | Granada </title>
</head>
<body>
<div id="header">
    <div id="h2">
        <img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
        <img id="search" src="https://cdn.discordapp.com/attachments/629756354701295616/707198877857480744/search-icon.png">
        <ul id="topnav">
            <li><a href="#">NEWS</a>
                <ul class="hidden">
                    <li><a href="#">CLUB</a>
                    </li>
                    <li><a href="#">FIRST TEAM</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">THE CLUB</a>
                <ul class="hidden">
                    <li><a href="#">CLUB INFORMATION</a>
                    </li>
                    <li><a href="#">STRUCTURE</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">FIRST TEAM</a>
                <ul class="hidden">
                    <li><a href="#">SQUAD </a></li>
                    <li><a href="#">TRAINING</a></li>
                </ul>
            </li>
            <li><a href="#">TEAMS</a>
                <ul class="hidden">
                    <li><a href="#">GRANADA B </a></li>
                    <li><a href="#">GFC LADIES</a></li>
                </ul>
            </li>
            <li><a href="#">GRANADA TV</a>
            </li>
            <li><a id="tickets" href="#"><img id="fb" src="https://image.flaticon.com/icons/svg/27/27212.svg">TICKETS</a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.