How to align text string header and data bound value in Listview

Question

Instead of using tables i have added  Div container to separate elements into associated content.
Using css Flex how may i align span and label elements into a two separate columns. So that they align, with equal spaces between to fill Box size. 


e.g 
	InvoiceNumber		13456
	
	UserID				Peter

<div class="Box" >
  
<span class="First">InvoiceNumber:</span>    
                <asp:Label CssClass="selected" ID="InvoiceNumberLabel" runat="server" Text='<%# Eval("InvoiceNumber") %>' />
    <span class="First">UserID:</span>  <asp:Label CssClass="selected" ID="UserIDLabel" runat="server" Text='<%# Eval("UserID") %>' />

....

</div>

Answer 1

Hi @peter liles,

You can use the newline character <br/> to achieve line breaks, and then you can convert the <span> into a block-level element and then adjust it.

 <div class="Box">
     <span class="First">InvoiceNumber:</span>
     <asp:Label CssClass="selected" ID="InvoiceNumberLabel" runat="server" Text='<%# Eval("InvoiceNumber") %>' />
     <br />
     <span class="First">UserID:</span>
     <asp:Label CssClass="selected" ID="UserIDLabel" runat="server" Text='<%# Eval("UserID") %>' />
     <br />
 </div>

<style>
    .First {
        width: 100px;
        display: inline-block;
        padding: 5px;
    }
</style>

Result:

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.