Se connecter avec
S'enregistrer | Connectez-vous

[Résolu] Css border-bottom sur plusieurs lignes

Dernière réponse : dans Programmation

Bonjour,

Sur ma page j'ai une colonne sur la gauche qui permet d'afficher plusieurs titres les uns en dessous des autres, et séparés par un border-bottom.

le code css de ma bordure :
  1. #tree{
    

  2. padding:0px 10px 0 8px;margin:0;
    

  3. }
    

  4. #tree ul{
    

  5. color:#fff;padding:0 0 0 20px;margin:5px 0 5px 0;list-style-type:none;text-decoration:none;
    

  6. }
    

  7. #tree .parent0{
    

  8. background:#ce0000;color:#fff;font-size:13px;border-bottom:1px solid #fff;padding:2px 0 2px 5px;list-style-type:none;
    

  9. }


et le code pour chaque titre :
  1. <ul id="tree">
    

  2. <li class="parent0">
    

  3. <a class="parent0" href='"mon lien"</a>
    

  4. </li>
    

  5. </ul>


Mon problème est que dès que j'ai un titre un peu trop large, il s'affiche sur deux lignes et là ma bordure foire complètement. Du genre :
Mon titre trop grand sur
deux lignes
Un titre de taille normale

Est-ce que quelqu'un sait de quoi ça vient et comment régler ce problème ?

Merci!

Autres pages sur : resolu css border bottom plusieurs lignes

Lassé par la pub ? Créez un compte

Bon finalement j'ai trouvé une parade ^^

  1. #tree .parent0{
  2. background:#ce0000;color:#fff;font-size:13px;border-bottom:1px solid #fff;padding:2px 0 2px 5px;list-style-type:none;
  3. }
  4. #tree .parent1{
  5. background:#ce0000;color:#fff;font-size:13px;padding:0px 0 2px 0px;list-style-type:none;
  6. }
  7. #tree .parent0_active{
  8. background:#f5f5f5;color:#000;font-size:13px;font-weight:bolder;border-bottom:1px solid #fff;padding:2px 5px 2px 5px;list-style-type:none;
  9. }


et 

  1. <ul id="tree">
  2.     <li class="parent1">
  3.    <div class="parent0"><a  href='"mon lien"</a></div>
  4.     </li>
  5.    </ul>
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde