enter image description here

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
Burger Sasha 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
Rap Sherlock 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
ankit singh 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.

enter image description here

1
Buwaneka Sudheera 3 oct. 2019 a las 07:42