如何在HTML中对齐两列 [英] How to align two columns in HTML

问题描述

我正在尝试使用HTML格式化个人信息列表. 像这样:

I am trying to format a personal info list in HTML. Something like:

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

但是运行此代码时，它看起来像

but when you run this code, it will look like

Name: First Last

    Age: 21

 Movie: xxxxx

基本上位于每行的中心.我真正想要实现的是这样的:

which basically is centered every line. What I really want to achieve is like this:

 Name: First Last

  Age: 21

Movie: xxxxx

对齐所有:"冒号. 我的想法是制作一张桌子，然后分别对齐每一列，但是我怀疑这是实现此目的的最佳方法.希望你们能给我一些更好的解决方案.谢谢.

which align all the ":" colons. My idea is to make a table, then align each column separately, but I doubt that is the best way to do make this. Hope you guys can give me some better solutions. Thank you.

推荐答案

尝试这段代码.

这称为网格布局，当前是最常用的布局类型之一.其主要思想是将页面分成多个框并堆叠在一起.

This is called a grid layout, which is currently one of the most used types of layouts ones. The main idea about it is just splitting your page into boxes and stacking them together.

.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;
  }

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

这篇关于如何在HTML中对齐两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！