顯示標籤的潛臺詞時的對齊問題-html

Question

我有下面的html代碼，我想爲MyCalendar標籤添加一個subtext（選擇日期）。

<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

您可以嘗試使用：後元素像這樣如此你不必觸摸你的HTML結構cture：

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>