Question

enter image description here

body{
    margin: 0;
    height: 100%;
//  background-color:black;
    background-image: url("3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
//  background-position: center;
    background-attachment: fixed;
    cursor: url("cursor.png"), auto;
}
.header {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align:center;
    width: 100%;
    position: absolute;
    background: transparent;
    background: linear-gradient(rgba(195,162,94,.4), rgba(0,0,0,0.3));
    overflow: hidden;
    z-index: 1;
}

li {
    display: inline-block;
//  margin-left: 100px;
}

.logo img{
    width: 135px;
    height: auto;
    position: absolute;
    margin-top: 0px;
    margin-left: 40px;
    z-index: 2;
    cursor: url("cursor.png"), auto;
}

li a{
    width: 100px;
    display: block;
//  padding-left: 500px;
    padding: 35px 15px;
    font-size: 20px;
    font-family: Sylfaen;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: url("cursor.png"), auto;
}

li a:hover{
    color: rgba(96,49,18);
}


    <div class="header">
        <div class="logo">
            <a href="#">
                <img src="logo.gif">
            </a>
        </div>

        <div class="navs">      
            <ul>
              <li><a href="#none">Home</a></li>
              <li><a href="#none">Game Info</a></li>
              <li><a href="#none">Gameplay</a></li>
              <li><a href="#none">Media</a></li>
            </ul>
        </div>                          
    </div>

如何不让它们在导航栏中发生冲突？他们在我放大时发生碰撞。我似乎无法理解它的工作原理而且我似乎不知道该怎么办。像那里有一堵墙一样放大时如何使它们不发生碰撞。

Answer 1

向您的UL添加填充

将padding-left: 135px;添加到ul中，该宽度与徽标宽度相同。这样可以防止导航区域内容占据相同的空间。

您可以添加更多的填充，使其完全触摸！

做出响应

理想情况下，您希望使其具有响应性，以便当徽标达到一定宽度时，徽标会超出导航栏或您觉得最合适的地方。

@media only screen and (max-width: 600px) {
    .logo {
    /*Your styles on small screen - example only*/
     display:block
     position:releative;
    }
}

请参见Responsive Web Design - Media Queries

body{
    margin: 0;
    height: 100%;
//  background-color:black;
    background-image: url("3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
//  background-position: center;
    background-attachment: fixed;
    cursor: url("cursor.png"), auto;
}
.header {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding-left: 135px;
    text-align:center;
    width: 100%;
    position: absolute;
    background: transparent;
    background: linear-gradient(rgba(195,162,94,.4), rgba(0,0,0,0.3));
    overflow: hidden;
    z-index: 1;
}

li {
    display: inline-block;
//  margin-left: 100px;
}

.logo img{
    width: 135px;
    height: 135px;
    height: auto;
    position: absolute;
    margin-top: 0px;
    margin-left: 40px;
    z-index: 2;
    cursor: url("cursor.png"), auto;
    
}

li a{
    width: 100px;
    display: block;
//  padding-left: 500px;
    padding: 35px 15px;
    font-size: 20px;
    font-family: Sylfaen;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: url("cursor.png"), auto;
}

li a:hover{
    color: rgba(96,49,18);
}

<div class="header">
        <div class="logo">
            <a href="#">
                <img src="https://otherthings.files.wordpress.com/2016/02/emoji-books.jpg?w=135&h=135" width="135px" height="135px">
            </a>
        </div>

        <div class="navs">      
            <ul>
              <li><a href="#none">Home</a></li>
              <li><a href="#none">Game Info</a></li>
              <li><a href="#none">Gameplay</a></li>
              <li><a href="#none">Media</a></li>
            </ul>
        </div>                          
    </div>

如何不让它们在导航栏中发生冲突？

1 个答案:

向您的UL添加填充

做出响应