Estoy tratando de alinear estos elementos como se ilustra en la imagen.
Inicialmente usé float y luego probé ancho: calc () pero encontré que esto causará problemas con ciertos clientes.
¿Alguien puede sugerir otra solución?
<tr height="40px" bgcolor="#00a2c5">
<td>
<span style="padding-left:20px;color:#ffffff;display: inline-block;width: calc(50% - 40px);"><a href="#">Call 13 63 93</a></span>
<span style="padding-right:0px;color:#ffffff;text-align:right;display:inline-block;width: calc(50% - 0px);"><a href="#">Clarendon.com.au</a></span>
</td>
</tr>
2
3 oct. 2019 a las 09:30
3 respuestas
La mejor respuesta
utilice este HTML: no es necesario llamar u otro HTML, la tabla tiene CSS diferente, así que use el parámetro o atributo de tabla para el correo electrónico.
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr bgcolor="#00a2c5">
<td align="left" width="50%" height="40px"><a href="#" style="color:#ffffff;">Call 13 63 93</a></td>
<td align="right" width="50%"><a href="#" style="color:#ffffff;">Clarendon.com.au</a></td>
</tr>
</table>
3
3 oct. 2019 a las 08:15
Creo que esto podría suceder porque incluye dos etiquetas span con una sola etiqueta td, si es posible actualice amablemente su estructura de esta manera
<table style="width: 100%; border-collapse:collapse">
<tr height="40px" bgcolor="#00a2c5">
<td valign="center" style="padding:10px;text-align:left">
<a href="#">Call 13 63 93</a>
</td>
<td valign="center" style="padding:10px;text-align:right">
<a href="#">Clarendon.com.au</a>
</td>
</tr>
</table>
0
3 oct. 2019 a las 07:08
Es mejor si pudiera usar etiquetas div en lugar de tablas. Puedes crear esa alineación así.
<div id="whiteDiv">
<div id="blueDiv">
<span id="span1"><a href="#" id="anchor1">Call 13 63 93</a></span>
<span id="span2"><a href="#" id="anchor2">Clarendon.com.au</a></span>
</div>
</div>
#blueDiv{
background-color: blue;
display: flex;
width: 100%;
flex-direction: row;
height: 50px;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
}
#blueDiv span a{
color: #fff;
}
#whiteDiv{
background-color: #EAE8E8;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
padding-left: 10px;
padding-right: 10px;
}
Lo he comprobado en codepen.
1
3 oct. 2019 a las 07:42