2015-08-11 2 views
0

Ma liste non ordonnée semble sortir de son élément parent et passer en dessous. Je suis sûr que c'est une solution facile, mais je ne peux tout simplement pas comprendre. Je suis nouveau en html et css.Numéro de liste non ordonnée

J'ai ajouté mes codes ici dans l'espoir que quelqu'un trouve quelque chose pour moi. Je pense que j'ai déjà posé cette question auparavant. Je ne suis pas sûr, de toute façon. Merci d'avance.

header { 
 
\t width: 100%; 
 
\t height: 36px; 
 
\t border-bottom: 1px solid #f0efef; 
 
\t box-shadow: 0 0 5px 0 #f0efef; 
 
} 
 

 
.header-content { 
 
\t width: 1030px; 
 
\t height: 36px; 
 
\t background-color: red; 
 
} 
 

 
.header-content p { 
 
\t margin: 0; 
 
\t font-size: 14px; 
 
\t padding: 7px 15px 0 15px; 
 
} 
 

 
.header-content ul { 
 
\t margin: 0; 
 
\t float: right; 
 
\t list-style: none; 
 
\t padding: 5px 15px 0 15px; 
 
} 
 

 
.header-content ul li { 
 
\t padding-left: 10px; 
 
\t display: inline; 
 
} 
 

 
.header-content ul li a, a:visited { 
 
\t color: #404040; 
 
\t font-size: 14px; 
 
\t text-decoration: none; 
 
}
<header> 
 
\t \t <div class="header-content"> 
 
\t \t \t <p>Welcome, please sign or register</p> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">My Account</a></li> 
 
\t \t \t \t <li><a href="#">Gift Cards</a></li> 
 
\t \t \t \t <li><a href="#">Customer Care</a></li> 
 
\t \t \t \t <li><a href="#">Community</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </header>

Répondre

1

Cet élément de paragraphe est un élément de niveau bloc donc il va pousser votre ul vers le bas. Pour résoudre le problème, vous pouvez float: left votre balise p dans l'en-tête

header { 
 
\t width: 100%; 
 
\t height: 36px; 
 
\t border-bottom: 1px solid #f0efef; 
 
\t box-shadow: 0 0 5px 0 #f0efef; 
 
} 
 

 
.header-content { 
 
\t width: 1030px; 
 
\t height: 36px; 
 
\t background-color: red; 
 
} 
 

 
.header-content p { 
 
\t margin: 0; 
 
\t font-size: 14px; 
 
\t padding: 7px 15px 0 15px; 
 
     float:left; 
 
} 
 

 
.header-content ul { 
 
\t margin: 0; 
 
\t float: right; 
 
\t list-style: none; 
 
\t padding: 5px 15px 0 15px; 
 
} 
 

 
.header-content ul li { 
 
\t padding-left: 10px; 
 
\t display: inline; 
 
} 
 

 
.header-content ul li a, a:visited { 
 
\t color: #404040; 
 
\t font-size: 14px; 
 
\t text-decoration: none; 
 
}
<header> 
 
\t \t <div class="header-content"> 
 
\t \t \t <p>Welcome, please sign or register</p> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">My Account</a></li> 
 
\t \t \t \t <li><a href="#">Gift Cards</a></li> 
 
\t \t \t \t <li><a href="#">Customer Care</a></li> 
 
\t \t \t \t <li><a href="#">Community</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </header>

+0

Wow, facile que ça hein? J'ai tout essayé, mais je n'ai jamais hésité à faire flotter le tag p sur la gauche mais ça a marché. Merci beaucoup! –

+0

Content de t'avoir aidé! Si c'est la bonne réponse, pourriez-vous l'accepter pour que je puisse en obtenir le crédit? – ReLeaf

+0

Absolument, j'ai essayé de marquer la bonne réponse comme je le fais toujours mais une erreur est revenue en disant que je devais attendre 11 minutes. Merci! J'ai depuis marqué comme la réponse. –