在菜單欄中右對齊文本

我正在爲電子郵件編寫一個菜單欄 - 因此這些雜亂的表格。我需要兩個menuoptions「點」和「我的資料」，以便在表的右側對齊：在菜單欄中右對齊文本

<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="padding:10px 0px 10px 0px" align="center" valign="top"> 
 
     <table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600"> 
 
      <tbody> 
 
      <tr> 
 
       <td align="left" width="35" valign="top">&nbsp;</td> 
 
       <td align="center" width="590" valign="middle"> 
 
       <table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590"> 
 
        <tbody> 
 
        <tr> 
 
         <td style="padding:7px 0px 7px 0px" align="center" valign="middle"> 
 
         <table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="left"> 
 
          <tbody> 
 
          <tr> 
 
           <td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top"> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Book</a> 
 
           <span>&nbsp;&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Gift</a> 
 
           <span>&nbsp;&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Voucher</a> 
 
           <span>&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank"></a> 
 
           <span>&nbsp;&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>Point:</b></a> 
 
           <span>&nbsp;&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>My profile</b></a> 
 
           </td> 
 
          </tr> 
 
          </tbody> 
 
         </table> 
 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
       <td align="left" width="35" valign="top">&nbsp;</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

JSFIDDLE

我已經嘗試設置text-align:right;上a標記，td標記，但我無法得到兩個選項對齊。

如果我在桌子上設置文本對齊，我可以將它們對齊。但是，所有的文字都是對齊的。

有沒有人知道我在做什麼錯在這裏？

來源

2017-09-25 NekMak

你在做錯的第一件事是你沒有直接在問題中顯示相關的代碼。 – CBroe

'a'元素只有其內容需求的寬度。試圖將文本對齊到任何一邊當然是不可能的 - 文本兩邊都沒有空格。 – CBroe

coursel是啊。我可以在td中設置每個菜單選項然後 – NekMak

試試這個片斷：

<a href="http://example.com" 
style= 
"color:#004b60; 
text-decoration:none; 
background-color: red; 
padding: 5px 10px 5px 10px; 
margin-left:250px;" 
target="_blank"><b>Point:</b> 
</a>

使用保證金左：250像素;而不是文本對齊：正確;

檢查小提琴：https://jsfiddle.net/hfsd62eg/1/

來源

2017-09-25 09:35:37

謝謝你的建議。如果我使用保證金，我會在移動設備上遇到問題。 – NekMak

它在iphone和ipad上正常工作..請檢查並讓我知道... –

我認爲這會爲你工作 -

我已經把內表width到100%和分裂你<a>標籤兩個<td>，給他們float。

<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="padding:10px 0px 10px 0px" align="center" valign="top"> 
 
     <table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600"> 
 
      <tbody> 
 
      <tr> 
 
       <td align="left" width="35" valign="top">&nbsp;</td> 
 
       <td align="center" width="590" valign="middle"> 
 
       <table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590"> 
 
        <tbody> 
 
        <tr> 
 
         <td style="padding:7px 0px 7px 0px" align="center" valign="middle"> 
 
         <table style="border-collapse:collapse;width:100%" cellspacing="0" cellpadding="0" border="0" align="left" width: "100%"> 
 
          <tr> 
 
          <td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8;float:left" align="center" valign="top"> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Book</a> 
 
           <span>&nbsp;&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Gift</a> 
 
           <span>&nbsp;&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Voucher</a> 
 
           <span>&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank"></a> 
 
           <span>&nbsp;&nbsp;</span> 
 

 
          </td> 
 
          <td style="float:right"> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>Point:</b></a> 
 
           <span>&nbsp;&nbsp;</span> 
 
           <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>My profile</b></a> 
 
          </td> 
 
          </tr> 
 
        </tbody> 
 
        </table> 
 
        </td> 
 
        </tr> 
 
      </tbody> 
 
      </table> 
 
      </td> 
 
      <td align="left" width="35" valign="top">&nbsp;</td> 
 
      </tr> 
 
    </tbody> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

希望這是對你有幫助。

來源

2017-09-25 09:46:41 weBBer

在菜單欄中右對齊文本

回答

相關問題