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

示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，您应该了解一些关于html和css的知识。 当您使用<span></span>将标题与值分开时，您的想法就会顺利开始，但在接下来的行中，您将为每行使用一个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>

然后添加一个css样式表，其中包含

之类的内容

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