對齊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，所以有一種方法可以將描述向左排列，填充一點點，然後將值填充到一點點的填充。

來源

2017-10-12 Silentbob

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

來源

2017-10-12 11:07:44

添加一些填充導致類

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

刪除保證金左右從lblResults1和lblResults2

來源

2017-10-12 11:04:34 knightMove

這是對.lblResults2固定寬度造成問題。當你的內容寬於固定寬度時 - 在你的代碼中顯示爲width: 50px;，那麼它會被「砍掉」，所以你的填充不起作用。嘗試刪除該寬度，它應該沒問題。

來源

2017-10-12 11:07:19 ceindeg

你可以嘗試柔性佈局是這樣的：

.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; 
}

來源

2017-10-12 11:07:40 NullPointer

對齊Div中的兩個標籤

回答

相關問題