1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Como deixar o espaçamento menor entre os links do menu?

to montando um site codigo do index é esse , index.php:

<html>
<head>
<link href="css/test.css" rel="stylesheet" type="text/css" />

</head>
<body>
<nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">SERVIÇOS</a></li>
            <li><a href="#">LOGIN</a></li>
            <li><a href="#">PRODUTOS</a></li>
            <li><a href="#">FALE CONOSCO</a></li>
        </ul>
</nav>

<header>
<div class="conteudo">
        <h1>Agiltec</h1>

      </div>
</header>






<footer>

        <div id="footer-texto"><p>Copyright 2019 - AGILTEC</p></div>


</footer>



</body>
</html>

o código css é esse, test.css:

body {
    margin:0;
    padding:0;
}
/*MENU*/

nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    background: linear-gradient(0deg, rgba(193, 188, 188, 0.31) 0%,rgba(255, 255, 255, 0.27) 100%);
    border-bottom: solid 2px #000;

}

nav > a {
    text-decoration: none;
    color: #f1f1f1;
    font-weight: 700;
    font-size: 28px;
    font-family: Pacifico, serif;
}





nav ul{
    list-style-type: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    display: flex;
    font-size:13px;
    padding: 0px;
    flex-direction: column;
    align-items: center;


}

nav ul li {
    text-align: center;
    width:100%;



}

nav ul li a {
    text-decoration:none;
    float:left;
    width:100%;
    color:#333;
    display:inline-block;
    line-height: 20px;
    margin-left: -100px;

}


nav ul li a:hover {
    color:#3a7773;
    width: 100%;
}
/*END MENU**/

/*CONTEUDO*/
header{
    background-size: cover;
    background-position: center;
    color: #f1f1f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20%;
}

.conteudo{
    margin-bottom: 50%;
}
.conteudo h1{
    color: #000;
}


/*END CONTEUDO*/

/*Footer*/
footer {
    padding: 10px;
    background: #f2f2f2;
}


footer p{
    text-align: center;
    padding: 10px;
    font-family:Cabin Condensed;
    color:#000;
    text-align:center;
    margin-top:40px;
}

/*END FOOTER*/


@media screen and (min-width: 768px) {
    /*
    NAVEGAÇÃO
    */
    nav {

        flex-direction: row;
        justify-content: space-around;
    }


    nav ul {
        flex-direction: row;
        width: 50%;
    }

      header {
        height: 60vh;
        justify-content: center;
    }
}

etão eu ja mexi nessas duas partes do código, primeira parte :

nav ul li {
    text-align: center;
    width:100%;

}

segunda parte:

nav ul li a {
    text-decoration:none;
    float:left;
    width:100%;
    color:#333;
    display:inline-block;
    line-height: 20px;
    margin-left: -100px;

}

tentei usar padding e mexer no width, mas não consegui, queria diminuir o espaçamento entre os link pra ficar mais junto e proporcional sem danificar o menu. Me ajudem porfavor, Obrigado.

tentei usar padding e mexer no width, mas n consegui, queria diminuir o espaçamento entre os link pra ficar mais junto e proporcional sem danificar o menu. Me ajudem porfavor, Obrigado.

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags html css css3 ou faça a sua própria pergunta.