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

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

目前他们是如此错位：

enter image description here

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

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

使用该样式添加它将如下所示：

enter image description here

我在您网站上的Chrome检查器中尝试了此功能，但效果很好。

如上所述，您还应该清除<dl>代码，因为它们目前都是</dl>，因此会显示语法错误。

Answer 2

使用较少的标签，这是一种更简单的方法。

您可以将4行保留在一个列表中：

<dl> 
    <dt>Client: </dt> 
    <dd>Frank Faria / Metro Skateboarding</dd> 
    <dt>Profile: </dt> 
    <dd>Personal</dd> 
    <dt>About: </dt> 
    <dd>A small project based on making a smooth skateboarding 
        video with a simple interpretation of phantom.</dd> 
    <dt>Year: </dt> 
    <dd>July 2013</dd>
</dl>

应用以下CSS：

dl {
    border: 1px solid blue;
    overflow: auto;
}
dt {
    border: 1px dotted gray;
    float: left;
    clear: left;
    margin: 0;
    width: 5em;
}
dd { 
    border: 1px dotted blue; 
    margin: 0;
    overflow: auto;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/5RsES/

诀窍是将dt元素向左浮动并为它们分配固定宽度。（您可以根据需要左/右对齐文字。）

然后，您可以在overflow: auto上使用dd将文本保留在一个很好的块中，如果它足够长以包裹到第二行或第三行。

最后，将overflow: auto应用于父dl元素，以便将浮点数很好地捆绑在一起，而不会影响父块之外的任何其他文本元素。

HTML - 以列表格式同等地制作两组文本

2 个答案: