web-dev-qa-db-fra.com

Aligner/faire flotter ma barre de navigation vers la droite

J'essaie actuellement d'aligner ma barre de navigation à droite, mais elle reste obstinément à gauche et je ne sais pas quoi faire. J'ai l'impression que j'ai tout essayé - alignement de texte, float, etc. J'ai également la réinitialisation de HTML5 CSS, si cela fait une différence. 

Quelqu'un peut-il consulter mon code et me faire savoir s'il peut y avoir une raison pour que ces éléments de navigation ne se déplacent pas de l'autre côté? Je suis vraiment frustré. Merci.

HTML:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

CSS:

  body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-  left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}

NOTE: C’est la façon dont je viens de le réparer

ul {text-align: right; width: 100%; background-color: #999; height: 20px; **padding-left: 750px;**}

cependant, je ne suis pas sûr que ce soit un très bon moyen de le faire ...

htmlcsshtml5css3layout
7
Juliana Marguerite Linder

Une solution, certes assez stupide (mais qui fonctionne), consiste à placer les éléments de la liste à droite, puis à inverser leur ordre en HTML. Comme ça:

<ul>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="index.html">Home</a></li>
</ul>

body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px;}
li {float: right;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}

voici le JSFiddle pour cela

6
TildalWave

C'est facile

http://jsfiddle.net/qZ7Tr/10/

remplacez li float par display:inline;

body {
    font: normal 300 .8em'Open Sans', sans-serif;
    overflow-x:hidden;
}
ul {
    text-align: right;
    width: 100%;
    background-color: #999;
    height: 20px;
}
li {
    display:inline;
}
ul a {
    color: white;
    padding: 0 10px;
    text-decoration: none;
}
ul a:hover {
    color: #333;
}
3
fredsbend

Changer cette ligne dans le CSS:

ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-left: 150px;}

Pour ça:

ul {float: right; background-color: #999; height: 20px; padding-  left: 150px;}

Le problème est que votre code d'origine définissait la largeur à 100%. Donc, il s'étendait à travers l'écran. text-align ne ferait pas flotter les éléments <li> intérieurs vers la droite. Donc, le seul moyen de réussir consiste à supprimer le width: 100%; et à définir un float: right;

Si vous souhaitez une zone grise sur la page, enveloppez le <ul> dans un <div> comportant les background-color: #999; et width:100%. Seul moyen d'y aller.

Voici le fichier HTML que j'ai créé pour démontrer:

<!DOCTYPE html>

<html lang="en">
<head>
  <title></title>
  <style type="text/css">
body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {float: right; background-color: #999; height: 20px; padding-  left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}
  </style>
</head>

<body>
  <ul>
    <li><a href="index.html">Home</a></li>

    <li><a href="company.html">Company</a></li>

    <li><a href="team.html">Management Team</a></li>

    <li><a href="contact.html">Contact</a></li>
  </ul>
</body>
</html>

EDIT: Fichier HTML de test supplémentaire pour afficher le concept d'emballage <div>. Ça marche pour moi.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>

  <title></title>
  <style type="text/css">
    body
    {
        font: normal 300 .8em 'Open Sans', sans-serif;
        overflow-x: hidden;
    }

    div
    {
        float: left;
        width: 100%;
        background-color: #999;
    }

    ul
    {
        float: right;
        background-color: #999;
        height: 20px;
        padding- left: 150px;
    }

    li { float: left; }

    ul a
    {
        color: white;
        padding: 0 10px;
        text-decoration: none;
    }

    ul a:hover { color: #333; }
</style>
</head>

<body>
  <div>
    <ul>
      <li><a href="index.html">Home</a></li>

      <li><a href="company.html">Company</a></li>

      <li><a href="team.html">Management Team</a></li>

      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</body>
</html>
0
JakeGould

Je suggère que le code ci-dessous facilite l'application du style:

HTML: 

<div class="nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="company.html">Company</a></li>
      <li><a href="team.html">Management Team</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

CSS: 

body {
    font: normal 300 .8em 'Open Sans', sans-serif; 
    overflow-x:hidden;
}
.nav {
    overflow: hidden;
    background-color: #999;    
    height: 20px; 
}
 ul {
    overflow: hidden;
    float: right;
}
ul li {
      float: left;
}
ul li a {color: white; 
    padding: 0 10px; 
    text-decoration: none;
}
 ul li a:hover {
      color: #333;
}

Voir le code snippé http://jsfiddle.net/sophy/eRLtw/

0
Sophy

Je ne sais pas si vous avez déjà réglé cela, mais vous pourriez essayer ceci ...

ul {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    text-align:right;
}
ul li {
    display:inline-block;
}

Ensuite, choisissez le type de rembourrage souhaité, etc.

Peut faire l'affaire sans se soucier des flotteurs.

Dan

0
Daniel Winnard
ul {float:right;}

Ne donnez pas au ul une largeur et vous obtiendrez exactement ce que vous cherchez.

0
Nathan