段落未正確對齊

基本上我試圖使用HTML和Dreamweaver創建電子郵件模板。這是我的第一個模板。事實上，我不能使用<div>標籤的電子郵件模板真的讓我頭痛。我很難將社交圖標與「我是社交文本」對齊。他們在td標籤內分配有align="center"。下面顯示的圖像是我的電子郵件模板的「頁腳」部分。段落未正確對齊

以下是截圖：

enter image description here

我只張貼了頁腳部分的代碼，因爲我的內容和標題部分工作正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TrickyPhotoshop Newsletter</title> 
<style type="text/css"> 
body { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 15px; 
    background: #CCC; 
} 
h4.copyright, p.copyright { 
    padding-left: 50px; 
    color: #FFF 
} 
h4.social { 
    padding-left: 50px; 
    color: #fff; 
} 
p.footer { 
    color: #FFF; 
} 
</style> 
</head> 

<body> 

<table width="600" align="center" bgcolor="#999999"> 
    <tr> 
    <td align="center"><h4 class="social">I am also social</h4></td> 
    </tr> 
    <tr> 
    <td align="center"><p class="footer"> 
     <a href="http://www.facebook.com/trickyphotoshop"> 
      <img src= 
"images/Facebook-256.gif" width="25px" height="25px"/> 
     </a> 
     <a href="http://www.tricky-photoshop.com"> 
      <img src="images/g+.gif" width="25px" height="25px" /> 
     </a> 
     <a href="http://www.twitter.com/trickyphotoshop/"> 
      <img src="images/twitter.gif" width="25px" height="25px" /> 
     </a> 
     </p></td> 
    </tr> 
    <tr> 
    <td height="10"><h4 class="copyright">Copyright Area</h4></td> 
    </tr> 
    <tr> 
    <td height="10"><p class="copyright"> 
     &copy All rights reserved 
     </p></td> 
    </tr> 
</table> 
</body> 
</html>

基本上我想兩件事情：

我想正確對齊「我也是社會的」文本與三個圖標即Facebook，微博，谷歌+
正如你可以看到有「版權區」和「保留所有權利」之間的巨大空間。我想刪除這個空間。

我知道，我的代碼是不是太專業，但它是我的第一個HTML代碼。

來源

2013-06-23 Vaibhav Sharan

你應該改變風格如下：

h4.social { 
    /* remove: padding-left: 50px; */ 
    color: #fff; 
} 
h4.copyright, p.copyright { 
    padding-left: 50px; 
    margin: 0px; /* add this line */ 
    color: #FFF; 
}

我建議使用this chrome extension爲「打」與CSS改變

來源

2013-06-23 04:06:13 alfasin

謝謝。通過爲h4.social添加「padding-left：」50px「確實是一個可怕的錯誤 –

段落未正確對齊

回答

相關問題