Дополнительное пространство в "Div" и вокруг него - PullRequest
Новая
       0

Дополнительное пространство в "Div" и вокруг него

0 голосов
/ 12 апреля 2020

По какой-то причине вокруг навигационной панели и в ней есть дополнительное пространство. Я установил поля и отступы в 0px, поэтому вокруг него не должно быть места, и я не знаю, как убрать лишнее пространство в div. Я пытался найти его, но не смог найти ничего, что могло бы помочь, поэтому я надеялся, что некоторые из вас смогут, спасибо! 

* {
    margin: auto 0;
    padding: 0px;
    font-family: 'Source Code Pro', monospace;
}

li {
    list-style: none;
    padding: 20px;
    padding-left: 30px;
    cursor: pointer;
}

a {
    color: white;
}

a:hover {
    color: white;
    text-decoration: none;
}

.nav1 {
    height: 10fr;
    width: auto;
    border: 2px solid white;
    background: #787878;
    border-radius: 15px;
}

.header {
    display: flex;
    grid-template-rows: repeat(auto);
    font-size: 23px;
}

.left {
    display: flex;
    justify-content: center;
}

.left:hover {
    background: #404040;
    border-radius: 13px;
}

.right {
    margin-left: auto;
}

.right:hover {
    background: #404040;
    border-radius: 13px;
}

.disable {
    display: flex;
    justify-content: center;
    color: white;
    cursor: pointer;    
}
<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style1.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="nav1">
        <ul class="header">
            <li class="left disable">Home Page</a></li>
            <li class="left"><a href="">Find Support</a></li>
            <li class="left"><a href="">Want To Offer Support?</a></li>
            <li class="left"><a href="">Found A Mistake?</a></li>
            <li class="right"><a href="">Contact Us</a></li>
        </ul>
    </nav>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 12 апреля 2020

В вашем классе nav1 есть белая рамка. Удалите его. 

.nav1 {
    height: 10fr;
    width: auto;
    //border: 2px solid white;
    background: #787878;
    border-radius: 15px;
}

Другое решение написано HanJeaHwan

1 голос
/ 12 апреля 2020

набор margin-bottom: 0 для класса заголовка 

.header {
    display: flex;
    grid-template-rows: repeat(auto);
    font-size: 23px;
    margin-bottom: 0;
}
0 голосов
/ 12 апреля 2020

Вы можете решить проблему, добавив код margin-bottom: 0 внутри тега ul.

следующим образом 

    * {
        margin: auto 0;
        padding: 0px;
        font-family: 'Source Code Pro', monospace;
    }
    
    li {
        list-style: none;
        padding: 20px;
        padding-left: 30px;
        cursor: pointer;
    }
    
    a {
        color: white;
    }
    
    a:hover {
        color: white;
        text-decoration: none;
    }
    
    .nav1 {
        height: 10fr;
        width: auto;
        border: 2px solid white;
        background: #787878;
        border-radius: 15px;
    }
    
    .header {
        display: flex;
        grid-template-rows: repeat(auto auto auto);
        font-size: 23px;
        margin-bottom: 0px;
    }
    
    .left {
        display: flex;
        justify-content: center;
    }
    
    .left:hover {
        background: #404040;
        border-radius: 13px;
    }
    
    .right {
        margin-left: auto;
    }
    
    .right:hover {
        background: #404040;
        border-radius: 13px;
    }
    
    .disable {
        display: flex;
        justify-content: center;
        color: white;
        cursor: pointer;
    }
<!DOCTYPE html>
<html>

<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style1.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300&display=swap" rel="stylesheet">
</head>
 
<body>
    <nav class="nav1">
        <ul class="header">
            <li class="left disable">Home Page</a>
            </li>
            <li class="left"><a href="">Find Support</a></li>
            <li class="left"><a href="">Want To Offer Support?</a></li>
            <li class="left"><a href="">Found A Mistake?</a></li>
            <li class="right"><a href="">Contact Us</a></li>
        </ul>
    </nav>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...