Подчеркнутый текст в HTML

Я хочу написать простейший пример на следующем рисункеПодчеркнутый текст в HTML

enter image description here

Мой пример должен работать в ie6,7,8,9 и так далее. Поэтому я не могу использовать float или что-нибудь полезное. Я сделал jsFiddle используя таблицу

<table width="500px"> 
    <tr> 
     <td width="45px"><span>e-mail</span> 
     </td> 
     <td align="center"> <div style="border-bottom: 1px solid;">[email protected]</div></td> 
    </tr> 
    <tr> 
     <td width="45px"></td> 
     <td align="center"> <span>(email)</span> 
     </td> 
    </tr> 
</table>

, но дно (электронная почта), имеют запас от линии. enter image description here

И я хочу, чтобы все было как на моем первом изображении. Спасибо

источник

2014-12-17 olgacosta

Проверка 'вертикальной align' собственности – panther

Это не про подчеркивание текста, речь идет о рисуя горизонтальную линию между частями текста. Непонятно, почему вы говорите, что вы «не можете использовать float или что-нибудь полезное», поскольку IE поддерживает float, хотя вы не говорите, почему float будет иметь значение здесь. –

Я пробовал это. Проверить это jsFiddle link

<table width="500px" style="padding:0px; border-spacing:1px"> 
<tr> 
    <td width="45px" style="padding:0px"><span>e-mail</span> 

    </td> 
    <td align="center" style="padding:0px"> [email protected] <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td> 

</tr> 
<tr> 
    <td width="45px" style="padding:0px"></td> 
    <td align = "center" style = "margin-top:0px; padding:0px">(email)</td> 
</tr>

источник

2014-12-17 09:25:00

«запас» вы имеете в виду частично разноса между ячейками, частично прокладкой внутри клетки, частично ведущей, а частично интервал в шрифте. В вашем подходе простейшее исправление, вероятно, заключается в том, чтобы установить расстояние между ячейками до нуля и немного переместить содержимое ячейки вверх, используя относительное позиционирование.

<table width="500" cellspacing="0"> 
 
    <tr> 
 
     <td width="45">e-mail 
 
     </td> 
 
     <td align="center" style="border-bottom: 1px solid">[email protected]</td> 
 
    </tr> 
 
    <tr> 
 
     <td width="45"></td> 
 
     <td align="center"><span style="position: relative; top: -0.15em">(email)</span> 
 
     </td> 
 
    </tr> 
 
</table>

источник

2014-12-17 09:28:58

применяются border-spacing: 0 к стилю таблицы (border-collapse: collapse будет работать также, как хорошо, как cellspacing атрибут)
добавить padding: 0 к td, содержащей <span>(email)</span>

Увеличить sp Туз между верхним электронной почтой-адресом и нижней границей (которые вы не упоминаете явно, но это не то же самое, как ваш пример изображение):

Подведите border-bottom стиль от div к родителю td
добавить padding-bottom к тому же td

источник

2014-12-17 09:39:18

Подчеркнутый текст в HTML

ответ

Смежные вопросы