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>
3 respuestas
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>
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>
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.
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].