对齐Div中的两个标签

问题描述：

使用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，所以有一种方法可以将描述向左排列，填充一点点，然后将值填充到一点点的填充。

答

.results { 
 
    display: block; 
 
    box-sizing: border-box; 
 
    background-color: #F4F4F4; 
 
    margin: 10px; 
 
    border-radius: 15px; 
 
} 
 
.results::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.result { 
 
    font-size: 1.1em; 
 
    color: #000; 
 
    width: 50%; 
 
    float: left; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 
.lblResults1 { 
 
    width: 70%; 
 
    float: left; 
 
} 
 
.lblResults2 { 
 
    float: right; 
 
    width: 30%; 
 
    text-align: right; 
 
} 
 

 
.result--ellipsis { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<div class="results" id="divResult1"> 
 
    <label ID="lblResult1Desc" class="result lblResults1">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label> 
 
    <label ID="lblResult1Val" class="result lblResults2">€ 12.735.430,9</label> 
 
</div> 
 

 
<div class="results" id="divResult1"> 
 
    <label ID="lblResult1Desc" class="result lblResults1 result--ellipsis">WITH ELLIPSIS Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label> 
 
    <label ID="lblResult1Val" class="result lblResults2">€ 12.735.430,9</label> 
 
</div>

答

添加一些填充导致类

.result { 
padding: 10px; /*this will include top and bottom too */ 
}

删除保证金左右从lblResults1和lblResults2

答

这是对.lblResults2固定宽度造成问题。当你的内容宽于固定宽度时 - 在你的代码中显示为width: 50px;，那么它会被“砍掉”，所以你的填充不起作用。尝试删除该宽度，它应该没问题。

答

你可以尝试柔性布局是这样的：

.results { 
height: 30px; 
background-color: #ffffff; 
vertical-align: middle; 
line-height: 30px; 
margin-top: 10px; 
border: solid 1px white; 
border-radius:10px; 
display: flex; 
justify-content: space-between; 
} 
.lblResults1 
{ 
font-size: 1.1em; 
color: #000000; 
} 
.lblResults2 { 
font-size: 1.1em; 
color: #000000; 
}

对齐Div中的两个标签

相关推荐