HTML - 使两组文本以列表格式彼此相邻

Question

我目前正在尝试基本上使用 html 代码来使文本看起来像所有排列顺利一样:

那就是——

客户:姓名

关于:名字

(这可以在我的网站页面底部看到:http://award46.com/motion/)，这不是最容易解释的事情。我基本上想让它彼此相邻内联，客户端和名称/关于和名称之间的空间相等。

用于此的以下代码是:

<p>THIS IS A TEST</p>

 .Inline dt, dd
    {

        margin: 0;
        padding: 0;
        height: 30px;
        line-height: 14px;
        display:inline;              
    }


   .tm dt
    {

        padding-left: 20px;
        text-align: right;
        width: 100px;
    }

<div class="Inline">
  </dl>             
     <dt>Client: </dt>              
        <dd>Frank Faria / Metro Skateboarding</dd>
  </dl>
</div>

<div class="Inline">
  </dl>             
     <dt>Profile: </dt>              
        <dd>Personal</dd>
  </dl>
</div>

<div class="Inline">
  </dl>             
     <dt>About: </dt>              
        <dd>A small project based on making a smooth skateboarding video with a simple interpretation of phantom.</dd>
  </dl>
</div>

<div class="Inline">
  </dl>             
     <dt>Year: </dt>              
        <dd>July 2013</dd>
  </dl>
</div>

提前感谢您的任何回复。

亲切的问候，

亚伦

Answer 1

好的，我现在明白了。在您的网站上，列表内容的右侧似乎没有垂直对齐。

目前它们像这样错位:

您可以通过将此添加到您的 dd 来解决此问题样式选择器:

dd {
   position: absolute;
   left: 30px; /* you can change this value to your preference */
}

使用该样式添加它看起来像这样:

我在您网站上的 Chrome 浏览器检查器中试过了，效果很好。

如上所述，您还应该清理 <dl>标签，因为它们目前都是 </dl>从而显示语法错误。