HTMLアラインラベルとテキスト

Question

私は

下の画像のように見えるビューを作成しようとしていますが、これまで私の見解は

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

controller.cs

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

が含まれています

ビューを画像のように見せるにはどうすればよいですか？

Answer 1

あなたが

例のテーブル構造を作成している場合はHTML tableを使用することをお勧めし：すべての

<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

まず、あなたは、HTMLに関するある程度の知識を取得する必要がありますとCSS。 タイトルは<span></span>の値からタイトルを切り離すとうまく始まりますが、次の行では各行に1つのdivを使用しています。どうして？画面上のアイテムを整列したり分割したりするには、divやspanのような要素をそれらの要素に配置する必要があります。

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

その後、作業のコードを入力してください

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