Question

我正在尝试使用HTML格式化个人信息列表。类似的东西：

.myself p{
	font-size: 130%;
  	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

<div class="myself">
<p>Name: First Last<br /><br />Age: 21<br /><br />Movie: xxxxx<br /><br /></p>
</div>

但是当你运行这段代码时，它看起来像

Name: First Last

    Age: 21

 Movie: xxxxx

基本上以每一行为中心。我真正想要实现的是：

 Name: First Last

  Age: 21

Movie: xxxxx

对齐所有“：”冒号。我的想法是制作一个表格，然后分别对齐每一列，但我怀疑这是做这个的最好方法。希望你们能给我一些更好的解决方案。谢谢。

Answer 1

试试这段代码。

这称为网格布局，目前是最常用的布局类型之一。关于它的主要想法是将页面拆分成盒子并将它们堆叠在一起。

＆＃13;

.myself .property{
  width:30%;
  display:inline-block;
  box-sizing:border-box;
  text-align:right;
  }

.myself .value{
  text-align:left;
  padding-left:10px;
  width:70%;
  display:inline-block;
  box-sizing:border-box;
  }

＆＃13;

<div class="myself">
<div class="property">Name:</div><div class="value"> First Last</div> 
<div class="property">Age:</div><div class="value"> 21</div> 
<div class="property">Movie:</div><div class="value"> xxxxxx Last</div> 
  </div>

＆＃13;

Answer 2

使用<table>元素而不是使用表的另一个选项。以下是它的外观基本示例：

{{1}}

{{1}}

与表格所需的相比，HTML代码的好处更少，而且复杂性更低。但是，如果需要列标题，那么您一定要使用{{1}}元素。

Answer 3

在我看来，使用表格来表示这些简单的东西是没有问题的。

<table>
    <tr>
        <td class="titles"> My name :</td>
        <td>John</td>
    </tr>
</table>

样式

.titles { text-align : right; }

Answer 4

这是我的表格解决方案。不是像素完美但它应该让你开始......

#mytable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 200px;
}

#mytable td {
border: 1px solid #ddd;
padding: 8px;
}
#mytable .centered{
text-align:center;
} 
#mytable .age{
padding-left:54px;
} 
#mytable .movie{
padding-left:40px;
} 
#mytable tr:nth-child(even){background-color: #f2f2f2;}

#mytable tr:hover {background-color: #ddd;}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table id="mytable"> 
<tr>
 <td class="centered">Name: First Last</td>
</tr>
<tr>
 <td class="age">Age: 21</td>  
</tr>
<tr>
 <td class="movie">Movie: xxxxx</td>
</tr>
</table>

如何在HTML中对齐两列

4 个答案: