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

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

回答

相關問題