html - 显示标签的子文本时出现对齐问题 - html

Question

我有下面的 html 代码，我想为 MyCalendar 标签添加一个子文本(选择日期)。

<tr style="height:5%;">
  <td colspan="2">
    <span style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
    <span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
  </td>
</tr>

我试过如下，但对齐方式不符合预期:

<tr style="height:5%;">
  <td colspan="2">
    <span style="float:right;"> <label style="float: right;display:block;">MyCalendar: <br /><span> <font size="1">(select Dates) <font size="1"></span><input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label>
    </span>
    <span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
  </td>
</tr>

Answer 1

您可以尝试像这样使用 :after 元素，这样您就不必触及您的 HTML 结构:

span.more label {
    position: relative;
}
span.more label:after {
    content: "(Select dates)";
    position: absolute;
    bottom: -10px;
    left: 10px;
    font-size: 11px;
}

<tr style="height:5%;">
  <td colspan="2">
    <span class="more" style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
    <span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
  </td>
</tr>