HTML 对齐标签和文本答案

【问题标题】：HTML align labels and textsHTML 对齐标签和文本
【发布时间】：2017-11-03 06:28:58
【问题描述】：

我正在尝试制作如下图所示的视图

我的观点包含：

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

如何对齐视图以使其看起来像图像？

【问题讨论】：

请提供工作代码。

标签： html css model-view-controller

【解决方案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?

【讨论】：

【解决方案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-stylesheet，包含类似的东西

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

【讨论】：