创建带有标题的语义清理列表

我想用一个定义列表<dl>而不是一个<ul>因为没有要点的，所以没有CSS去除子弹。并且它的标记也较少。我是否以正确的方式思考，还有什么我应该考虑的？

HTML标记

<aside class="details"> 

    <dl> 
     <dt>Role</dt> 
     <dd>UI Design</dd> 
     <dd>Frontend-development</dd> 
     <dt>Client</dt> 
     <dd>Jame Saunders</dd> 
     <dt>Year</dt> 
     <dd>2016</dd> 
     <a href="http://www.google.com">Visit Site</a> 
    </dl> 

</aside>

唯一的问题是每个<dt>

来源

2017-06-29 samsos

好之间的间距，所以我不认为这样的描述列表去对此的正确方法。说明列表是为了显示项目的定义。

EX：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<dl> 
 
    <dt>Coffee</dt> 
 
    <dd>Black hot drink</dd> 
 
    <dt>Milk</dt> 
 
    <dd>White cold drink</dd> 
 
</dl> 
 

 
</body> 
 
</html>

我会用<ul>标签建议。它的效果比DL好一点，它使用正确的HTML5风格。所以我掀起了一个JSFiddle来展示它如何使用<ul>，并使它看起来几乎完全像图像。 JSFiddle

我添加了一些CSS：

li.title { 
    font-weight: bold; 
    color: rgb(0, 0, 0); 
    margin-bottom: 2px; 
} 
li { 
    color:rgb(50, 255, 231); 
} 
a.link { 
    color: #ff0000; 
    font-weight:bold; 
    text-decoration:none; 
} 
li.link { 
    margin-top:5px; 
} 
ul { 
    list-style-type: none; 
}

，以便它显示酷似图像，并添加了一些间距和链路造型。希望这对你的作品，并为未来的refrence约<dl>标记，请参阅to the w3schools example.

来源

2017-06-29 18:07:40 InvincibleM

不会与<dl>标签在这里，而是<ul>标签，但在下面，我调整了margin和padding值<dl>标签来获取输出去你要。

HTML：

<dl> 
    <dt>Role</dt> 
    <dd>UI Design</dd> 
    <dd>Frontend-development</dd> 
    <dt>Client</dt> 
    <dd>Client Name</dd> 
    <dt>Year</dt> 
    <dd>2016</dd> 
    <a href="http://www.google.com">Visit Site</a> 
</dl>

CSS：

dl { 
    display: block; 
    float: left; 
} 

dt, 
dd { 
    display: block; 
    padding: 2px; 
    margin: 2px; 
} 

dt { 
    padding-bottom: 20px; 
    padding-top:10px; 
} 

dd { 
    color: green; 
}

https://jsfiddle.net/1tgatcs2/

来源

2017-06-29 18:23:44 Mobeen

创建带有标题的语义清理列表

回答

相关问题