3

I'm wondering if any HTML tag exists to create lists from example 1 instead of example 2:

enter image description here

Is this ul/ol element with b tag inside? Or maybe dl, dt and dd? I'm sorry if this is too easy question but I really have no idea. Technically, according to W3 specification, it can also be figure element but none of these will produce this nice indentation. Does this require CSS? If so, what kind of CSS?

References:

4

2 回答 2

4

您在此处发布的内容是定义列表 ( <dl>) 的经典用途。这是另一种方法:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
  dl, dt, dd {margin:0; padding: 0;}
  dl {width: 300px;}
  dt {float: left;}
  dd {overflow: hidden; padding-left: 14px; position: relative;}
  dd:before {content: "-"; position: absolute; top: 0; left: 4px;}
</style>

</head>
<body>
  <dl>
    <dt>code</dt>
    <dd>a system for communication by telegraph, heliograph etc., in which long and short sounds, light flashes etc. are used to symbolize the content of a message ...</dd>
  </dl>
</body>
</html>
于 2013-04-28T15:53:35.750 回答
-1

也许像这样的CSS?

ul
{
  list-style-type:none;
  width:400px;
}

li
{
   float:left;
}

标记

<div>
<ul>
    <li>
        code - 
    </li>
    <li style="width:200px;text-align:justify;">
        adofjsdofioijdfoidjgdoigjgoidjgdofgjdfogidfjgoidfgjdfiogjdiogjdf
        dfgoijfdoigjdgoijgoigjoigjgoidjgoidfgjdfoiigjfdoigjfdgoidfjgoidfjgi
        dfgdgdjgodifgjdoigjogijgoigjfdoigdfgodfgoidfjgi
    </li>
</ul>    
</div>

http://jsfiddle.net/NB2Ep/12/

也许有更好的方法来做到这一点。我使用了简单的 ul/li。

于 2013-04-28T15:33:14.507 回答