Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

whatever123

Como acertar o "Dropdown Menu" CSS

Por , em Desenvolvimento frontend

Recommended Posts

pwd    7

pwd
Postado

Hey cara, blzs?

 

Veja que vc usou asassdasdadas, como vc não definiu um tamanho, ele vai interpretar como uma única palavra e quebrar a linha.

 

Basta definir tamanhos.

 

[ ]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

whatever123    0

whatever123
Postado

Hey cara, blzs?

 

Veja que você usou asassdasdadas, como você não definiu um tamanho, ele vai interpretar como uma única palavra e quebrar a linha.

 

Basta definir tamanhos.

 

[ ]'s

Sim, eu usei de propósito para ver o que acontecia. Como posso definir tamanhos? Construo uma classe em CSS referente ao <li> neste caso o último?

Compartilhar este post

Link para o post
Compartilhar em outros sites

whatever123    0

whatever123
Postado

Sim, pode definir pelo CSS.

 

Você só quer "estilizar" o último?

 

Sim, como faria? Eu tou seguindo pelo tutorial do W3school foi de lá que retirei esse exemplo. Como limito o tamanho? tentei com max-withd mas não resultou...

 

Segue o código: (isto é só um exemplo que tou testanto)

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

 

li {

float: left;

max-with:150px;

}

 

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

 

li a:hover {

background-color: #111;

}

</style>

</head>

<body>

 

<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#news">Newsdsadasdsadasdasdadasdads</a></li>

<li><a href="#contact">Contactsasasdasdasdasdsa</a></li>

<li><a href="#about">Aboutasdasdasdasdadasdaasdadasdadasdadsasdasd</a></li>

</ul>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pwd    7

pwd
Postado

Hey cara, blzs?

 

Então se vc for usar esses asdasdasdasdasdad, vai ter que quebrar o texto em bloco usando o 

word-wrap: break-word;

Você pode selecionar o último filho com o 

li:last-child a {
    width: 300px;
    color:green;
    background-color: #fff;
    
}

Segue com as mudanças

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
   float: left;
   text-align: center; 
}

li a {
    display: block;
    float: left;
    padding: 14px 16px;
    width: 150px;  

    color: white;
    text-decoration: none;
    word-wrap: break-word;
}

li:last-child a {
    width: 300px;
    color:green;
    background-color: #fff;
    
}

li a:hover {
    background-color: #111;
}

[ ]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito