Problème d'alignement CSS

Ceci est mon balisage, je dois aligner l'étiquette grise sous l'étiquette bleue et garder le numéro aligné avec l'étiquette bleue.Problème d'alignement CSS

CSS:

body 
{ 
    font-family: arial, helvetica, sans-Serif; 
} 


#talkbacks .noshow 
{ 
    clear: both; 
    display: table; /*padding-left: 14px;*/ 
    line-height: 13px; 
    width: 439px; 
} 


#talkbacks ul.top 
{ 
    border: solid 1px #fff; 
    margin: 0 -1px; 
} 

#talkbacks li 
{ 
    width: 100%; 
    margin-top: 11px; 
} 
#talkbacks ul 
{ 

    clear: both; 
} 



.n 
{ 
    color: #758888; 
    float: left; 
    font-size: 12px; 
    padding-right: 8px; 
    line-height: 15px; 

} 


.c 
{ 
    /*float: left;*/ 
    width: 400px; 
} 

.d 
{ 
    font-weight: bold; 
    color: #758888; 
    font-size: 12px; 
    line-height: 15px; 
    margin: 0; 
    padding: 0; 
} 


ul 
{ 
    list-style-image: none; 
    list-style-position: outside; 
    list-style-type: none; 
    padding-left:0px; 
    margin-left:0px; 
} 
a 
{ 
    font-size: 12px; 
    line-height: 15px; 
    font-weight: bold; 

} 

a:link, a:visited 
{ 
    color: #284D99; 
    text-decoration: none; 
    outline: none; 
} 
a:hover, a:active 
{ 
    text-decoration: underline; 
}

Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <ul> 
     <li> 
      <div class="noshow"> 
       <div class="n"> 
        <span id="ctl03_ctl00_ctl00_lblCommentNum">12.</span> 
       </div> 
       <div class="c"> 
        <a href="javascript:__doPostBack('ctl03$ctl00$ctl00$LinkButton1','')" id="ctl03_ctl00_ctl00_LinkButton1" 
         onclick="viewHide(this);return false;">title3</a> 
        <p class="d"> 
         marc,03/09/2009 12:23:40</p> 
       </div> 
      </div> 
     </li> 
    </ul> 
    <ul> 
     <li> 
      <div class="noshow"> 
       <div class="n"> 
        <span id="ctl03_ctl01_ctl00_lblCommentNum">12.</span> 
       </div> 
       <div class="c"> 
        <a href="javascript:__doPostBack('ctl03$ctl01$ctl00$LinkButton1','')" id="ctl03_ctl01_ctl00_LinkButton1" 
         onclick="viewHide(this);return false;">blabla</a> 
        <p class="d"> 
         bob,03/09/2009 12:23:55</p> 
       </div> 
      </div> 
     </li> 
    </ul> </body> 
</html>

Source

2009-09-07 dani

Swap les styles de classe pour ces particuliers corrections:

.n 
{ 
    color: #758888; 
    float: left; 
    font-size: 12px; 
    padding-right: 8px; 
    line-height: 15px; 
    width:15px; 
}

Ajout d'une largeur à la DIV contenant le numéro. Ne fait pas de mal à marquer la largeur d'un élément flottant. Vous n'êtes pas obligé de l'avoir si vous ne le voulez pas.

.c 
{ 
    float: left; 
    width: 400px; 
}

Décommentez le float:left; que vous aviez. Cela permettra au texte que vous avez dans ce DIV flotter à sa gauche et butter contre la classe précédente, .n qui détient le numéro.

.noshow 
{ 
    overflow:hidden; 
    clear:both; 
}

Ceci est la partie importante. La première ligne gardera les éléments enfants dans leur parent DIV et ne deviendra pas fou. Sinon, vous verrez le reste du document avancer. La deuxième ligne s'assure que le DIV restera sur sa propre ligne.

Source

2009-09-07 08:17:23 random

Dans votre code, vous ne l'avez pas mis en œuvre de nombreuses classes. Dans le plus simple, je pourrais suggérer cela

.c { margin-left: 3px; } 
.d { margin-top: 0px; }

en les mettant dans votre CSS.

Source

2009-09-07 08:10:04 rahul

Problème d'alignement CSS

Répondre

Questions connexes