Проблема выравнивания CSS

Это моя разметка, мне нужно выровнять серое ярлык под синей меткой и сохранить номер, выровненный с синей меткой.Проблема выравнивания 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>

источник

2009-09-07 dani

Свопа из стилей класса для этих конкретных исправлений:

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

Добавлена шириной в DIV проведение номера. Не мешает выделить ширину плавающего элемента. Вам не обязательно иметь это, если вы этого не хотите.

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

Uncommented out float:left;, который у вас был. Это позволит использовать текст, который у вас есть в этом конкретном DIV, по левому краю и прикладом против предыдущего класса .n, который удерживает номер.

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

Это важная деталь. Первая строка будет содержать дочерние элементы внутри их родителя DIV и не будет диким. В противном случае вы увидите остальную часть документа. Вторая строка просто гарантирует, что DIV будет продолжать свою линию.

источник

2009-09-07 08:17:23 random

В своем коде вы не реализовали много классов. В простейшем случае я могу предложить это

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

положив их в свой CSS.

источник

2009-09-07 08:10:04 rahul

Проблема выравнивания CSS

ответ

Смежные вопросы