Ik wil een tekstlabel ongeveer 6px naar beneden schuiven Ik voeg de stijl toe:
.price-label{
font-family:Arial, Helvetica, sans-serif;
font-size:small;
position:relative;
bottom:-6px;
vertical-align:bottom;
}
De HTML is:
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td>
</tr>
<tr>
<td> </td>
<td class="price-label">54.67</td>
</tr>
<tr>
<td width="28" bgcolor="#CCCCCC"> </td>
<td height="45"> </td>
</tr>
<tr>
<td width="28" bgcolor="#CC3300"> </td>
<td height="112"> </td>
</tr>
<tr>
<td width="28" bgcolor="#CCCCCC"> </td>
<td height="22"> </td>
</tr>
</table>
Visueel wil ik dat het label 54.67 horizontaal parallel wordt weergegeven – aan de opening waar de grijze cel (bovenste) en rode cel (tweede van boven) samenkomen. Aangezien het nummer dat punt in de balk aan de linkerkant voorstelt.
Dus als een andere techniek beter is, laat het me dan weten, misschien zou ik DIV’s moeten gebruiken, zou dat me meer controle geven?
Antwoord 1, autoriteit 100%
Als ik het goed lees, probeer je de grens tussen twee tabelcellen te overschrijden, wat niet werkt. U moet de eerste twee cellen in de rechterkolom consolideren en vervolgens rowspan=”2″ de nieuwe cel met het nummer erin. Lijn vervolgens de tekst in de cel verticaal boven of onder uit en voeg wat opvulling toe totdat deze goed is uitgelijnd.
Antwoord 2, autoriteit 90%
Als je het omlaag wilt verschuiven, moet je het een positieve 6px verschuiven, niet een negatieve 6px, en de top eigenschap, niet bottom
position: relative;
top: 6px;
Antwoord 3, autoriteit 60%
Label is een inline element, margin/padding zou alleen werken als je er een block van maakt (inline-block, block of float). Probeer dit:
.price-label {
padding:6px 0 0;
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline; }
Antwoord 4, autoriteit 40%
Misschien ben je beter af met:
.price-label { margin-top: 6px; }
Het is echter moeilijk om meer te weten te komen zonder enige context van wat er nog meer in die tabelcel is.
Antwoord 5, autoriteit 40%
Gebruik padding-top:6px; in plaats van positionering, wat erg rommelig kan worden met betrekking tot broers en zussen enz. en andere bijwerkingen heeft.