HTML align Etiketten und Texte

Question

Ich versuche, eine Ansicht zu machen, die unter

so weit meine Ansicht enthält

<span>Title :</span><span>@ViewBag.Movie</span> 
    <div>Date : @ViewBag.Date</div> 
    <div>Transaction Number : @ViewBag.TransactionNo</div> 
    <div>Timing : @ViewBag.Timing</div> 
    <div>Rating : @ViewBag.Rating</div> 
    <div>Hall : @ViewBag.Hall</div> 

die controller.cs

  ViewBag.Movie = "movie a"; 
      ViewBag.Date = "3-Nov-2017"; 
      ViewBag.TransactionNo = "1234"; 
      ViewBag.Timing = "7:30pm"; 
      ViewBag.Rating = "PG13"; 
      ViewBag.Hall = "3";` 

wie das Bild aussieht

Wie richte ich die Ansicht so aus, dass sie wie das Bild aussieht?

Answer 1

Es ist besser, HTML zu verwenden table, wenn Sie eine Tabellenstruktur

Beispiel zu erstellen:

<table> 
 
    <tr> 
 
    <th>Movie Information</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Title</td> 
 
    <td>: movie a</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Date</td> 
 
    <td>: 3-Nov-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Transaction Number</td> 
 
    <td>: 1234</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Title</td> 
 
    <td>: movie a</td> 
 
    </tr> 
 
</table?

Answer 2

Zunächst einmal sollten Sie einige Kenntnisse über HTML erhalten und css. Ihre Idee beginnt gut, wenn Sie den Titel von dem Wert mit <span></span> trennen, aber dann in den nächsten Zeilen verwenden Sie ein einzelnes Div für jede Zeile. Warum? Wenn Sie Elemente auf Ihrem Bildschirm ausrichten oder trennen möchten, müssen Sie diese Elemente in ihre eigenen Elemente wie div oder span einfügen.

<div class='myLabel'>Title :</div><div class='myValue>@ViewBag.Movie</div> 
<div class='myLabel'>Date :</div><div class='myValue>@ViewBag.Date</div> 

dann fügen Sie ein CSS-Stylesheet, mit so etwas wie

.myLabel { 
width: 150px; 
} 
.myValue { 
float: left; 
}