1

Estou brincando no fds e aprendendo um pouco o JQuery Mobile, e fui inserir uns botões no header, porém o ultimo botão sempre fica fora da posição "deslocado para baixo". como Resolver isso?

<!DOCTYPE html>
<html lang="pt-BR">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name='theme-color' content='#00974a'/>
<title>Teste</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>

<body> 

<div data-role="header" style="overflow:hidden;">
<h1>I'm a header</h1>
    <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /header -->


<div data-role="content"> 

</div><!-- /content -->
	 
</div><!-- /page -->
</body>
</html>

0

1 Resposta 1

1

O problema é que a indentação das <li> estava como espaço de texto, e o snippet daqui está gerando vários &nbsp; (espaço), como mostra o print abaixo:

inserir a descrição da imagem aqui

Se você copiar seu código num bloco de notas e colar novamente no snippet, irá remover esses espaços e o botão ficará ok, como mostra abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name='theme-color' content='#00974a'/>
<title>Teste</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>

<body> 

<div data-role="header" style="overflow:hidden;">
<h1>I'm a header</h1>
    <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /header -->


<div data-role="content"> 

</div><!-- /content -->
	 
</div><!-- /page -->
</body>
</html>

Agora, dá uma revisada no seu HTML, porque tem tags duplicadas e falta fechar o <head>.

1
  • Valeu cara! agora funcionou!.. show de bola! 17/04/2019 às 14:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .