創建帶有標題的語義清理列表

我想用一個定義列表<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

創建帶有標題的語義清理列表

回答

相關問題