[HTML+CSS] 如何用UL, LI 打造出表格 table, tr

使用CSS+ LI (非DIV) 畫出表格 (table) 的網頁排版

首先先來看個範例:

 
開始實作

<!-- http://blog.webgolds.com -->
<ul class="test-list">
  <li class="test-list-item">
    <span class="position">01</span>
    <a href="http://blog.webgolds.com" class="test-title" target="_blank">標題1</a>
    <span class="length">第三欄</span>
  </li>
  <li class="test-list-item">
    <span class="position">02</span>
    <a href="http://blog.webgolds.com" class="test-title" target="_blank">金站標題2</a>
    <span class="length">第三欄</span>
  </li>
</ul>
  CSS:
body{
  font-family: Helvetica, Arial, 'LiHei Pro', '微軟正黑體', '新細明體', sans-serif;
}
ul {
    list-style: none; /*將原先LI清單前方的黑圓圈取消*/
}
.test-list-item:not(:last-child), .forum-question, .sidebar-section:not(:last-child) {
    border-bottom: 1px solid #d7d7d7;
}
.test-list-item {
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 0;
}
.position {
    color: #2e9fff;
    padding-right: 1em;
}
span {
    font-style: inherit;
    font-weight: inherit;
}
.test-title {
    max-width: 205px;
    font-weight: 400;
    color: inherit;
}
.test-list-item .length {
    color: #cacaca;
    margin-left: auto;
}

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 1927
Last updated :2017-11-30