使用 CSS 的基於 HTML 時間線的列表樣式

Question

我想用ul制作 HTML-CSS 時間線。 我試圖設置邊距，但效果不佳。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Card View</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul class="histry-list">
        <li>2016</li>s
        <li>Some top heading</li>
        <li>Sub text</li>
    </ul>
</body>
</html>

CSS：

.histry-list{

   margin-top: 14px;
}

.histry-list li{

    list-style: none;
    line-height: 150%;
    font-size: 18px;
}

.histry-list li:first-child{

   font-weight: bold;
   font-size: larger;

   color: rgb(0, 0, 0);
}

.histry-list li:last-child{

   font-style: italic;
   color: rgb(65, 65, 65);
   font-size: 14px;
}

查看上面的代碼

但我想設計像這張圖片的列表在這里輸入圖片描述

這是一個列表，但在原始項目中會超過100個。主要目標是最小化HTML數據的帶寬[稍后簡單使用java腳本打印列表]。

我怎樣才能讓它工作？ 謝謝你們。

Answer 1

 .histry-list{ margin-top: 14px; } .histry-list li{ list-style: none; line-height: 150%; font-size: 16px; } .list-node{ display:flex; color: rgb(65, 65, 65); font-weight:bold; font-size: larger; } .year-node{ padding:15px 10px; } .details-node p{ padding:0px; margin:3px; font-weight: normal; font-size: larger; color: rgb(0, 0, 0); } .details-node p:last-child{ padding:0px; margin:3px; font-weight:normal; font-size: small; font-style: italic; color: #9b9b9b; font-size: 14px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Card View</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="histry-list"> <li> <div class="list-node"> <div class="year-node">2016</div> <div class="details-node"> <p>Some top heading</p> <p>Sub text</p> </div> </div> </li> </ul> </body> </html>

Answer 2

使用ul標簽中的flex-layout

 .histry-list{ margin-top: 14px; display: flex; align-items: center; } .histry-list li{ list-style: none; line-height: 150%; font-size: 18px; } .histry-list li:first-child{ font-weight: bold; font-size: larger; color: rgb(0, 0, 0); } .histry-list li p:last-child{ font-style: italic; color: rgb(65, 65, 65); font-size: 14px; } .histry-list li p { margin: 0; margin-left: 20px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Card View</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="histry-list"> <li>2016</li> <li> <p>Some top heading</p> <p>Sub text</p> </li> </ul> </body> </html>

使用 CSS 的基於 HTML 時間線的列表樣式

問題描述

2 個解決方案

解決方案1
2 2020-01-14 04:56:00

解決方案2
2 已采納 2020-01-14 05:04:17

使用 CSS 的基於 HTML 時間線的列表樣式

問題描述

2 個解決方案

解決方案1 2 2020-01-14 04:56:00

解決方案2 2 已采納 2020-01-14 05:04:17

解決方案1
2 2020-01-14 04:56:00

解決方案2
2 已采納 2020-01-14 05:04:17