Menu LI centralizado.

[danicarla 3]

Oi pessoal..
Estou fazendo um menu para um site mobile. E gostaria que ele ficasse centralizado assim:




Mas ele fica com um espaço no canto direito não pega a tela toda...
Meu código está assim:

<style type="text/css">
ul {
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;color:#FFF;font-size:24px;
text-align:center;
display:table-row;
width:100%;
}

#itens li {
  background-color:#666;
  display: block;
  width:100%;
  padding:10px;
  border: 1px solid #F0F0F0;
  border-radius:8px;
  margin-bottom: 10px;
}
</style>

<ul id="itens">
<li>Inicio</li>
<li>Quem Somos</li>
<li>Serviços</li>
<li>Contato</li>
</ul>

Algém sabe como posso resolver?

[fchagas97 2]

Olá danicarla, há um tempo atrás passei pela mesma situação e corrigi o problema usando um margin-left negativo para o ul. Eu não me lembro o valor exato, mas creio que seja entre -30px e -40px, ou algo mais. É só você fazer o teste com valores perto disso. Espero que ajude!

[danicarla 3]

Tentei fazer isso... mas dependendo do dispositivo ele não alinha corretamente.

[fchagas97 2]

Consegui fazer. Veja se o código abaixo funciona (é só editar a aparência como desejar):

<style type="text/css">
* { margin: 0; padding: 0; }
.menu { margin-left: 0; text-align: center; }
.menu li { list-style: none; background: #404040; padding: 5px 0; margin: 3px 5px; }
.menu li a { color: white; }
</style>

<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/linguagens/">Linguagens</a></li>
<li><a href="/contato/">Contato</a></li>
</ul>

[danicarla 3]

Obrigadinha deu certo :)

[leonardo de andrade baessa 16]

para que não venham a ter problemas futuros com outros modelos aconselho, que trabalhem com media query.

adicionando o estilo modo mobile, determinando em quais tamanhos o site deve exibir em cada plataforma.

Como assim?, caso ele abra em um telefone uma estrutura, caso ele abra em um Tablet outra e por ai vai.

Como fazer?. é simples no css

 

você adiciona

@media screen and(max-width:480px) {

 

Aqui dentro você determina as div para que sejam abertos apenas em aparelhos com a largura maxima de 480px.

e fecha no final do Css com

}

 

salva o css nome que vou usar stylemobille.css

 

na pagina principal onde você vai chamar o css.

você defini como ele vai ser lido por cada estilo.

<link rel="stylesheet" media=" screen and (max-device-width: 480px)" href="stylemobille.css">

 

então aqui ele só abre esse paramentro em midias com tamanhos até 480px caso seja maior ele vai abrir no media="all" . não nessa midia que foi determinada.

 

espero que esclareça.