如何在HTML中对齐两列

时间:2016-07-08 21:57:18

标签: html css

我正在尝试使用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

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

4 个答案:

答案 0 :(得分:3)

试试这段代码。

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

{{1}}
{{1}}

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

答案 2 :(得分:0)

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

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

样式

.titles { text-align : right; }

答案 3 :(得分:0)

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

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