使用ASP.NET创建一个div
,其中有两个标签。对齐Div中的两个标签
我有问题排列在div中的标签,因为我想第一个排队到左边,第二个到右边。我遇到的问题是我不知道标签显示的数据的长度,因为它是从数据库中查询的,所以它可能会改变。
这里是我的代码:
ASP.NET/HTML
<div class="results" id="divResult1" runat="server" visible="false">
<asp:Label ID="lblResult1Desc" runat="server" Text="" CssClass="lblResults1"></asp:Label>
<asp:Label ID="lblResult1Val" runat="server" Text="" CssClass="lblResults2"></asp:Label>
</div>
CSS
.results {
height: 30px;
background-color: #ffffff;
vertical-align: middle;
line-height: 30px;
margin-top: 10px;
border: solid 1px white;
border-radius:10px;
}
.lblResults1 {
font-size: 1.1em;
color: #000000;
float: left;
width: 50%;
margin-left: 10px;
}
.lblResults2 {
font-size: 1.1em;
color: #000000;
float: right;
padding-right: 25px;
width: 50px;
}
下图显示了我所看到的,当第二个标签(描述B下)获得一个长期的价值,正如你可以看到它看起来有点混乱,因为它是重叠的股利结束。如果在描述A中有一个短的值,那么后面会有很多空白。
另外描述的长度可以变化(虽然没有太长,可以很容易地配合在该空间直到£符号)。
我不擅长CSS,所以有一种方法可以将描述向左排列,填充一点点,然后将值填充到一点点的填充。