我正在尝试使用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
对齐所有“:”冒号。 我的想法是制作一个表格,然后分别对齐每一列,但我怀疑这是做这个的最好方法。希望你们能给我一些更好的解决方案。谢谢。
答案 0 :(得分:3)
试试这段代码。
这称为网格布局,目前是最常用的布局类型之一。关于它的主要想法是将页面拆分成盒子并将它们堆叠在一起。
.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;
答案 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>