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; 
}

마크 업 :

당신이 많은 클래스를 구현하지 않은 코드에

<!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; 
}

사용자가 가지고 있던 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 정렬 문제

답변

관련 문제