Question

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

＆＃13;

<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>

＆＃13;

我尝试如下，但对齐方式不符合预期：

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: