創建自定義列表項目HTML，行間距

我目前正在一個項目上，我想顯示類似於Apple的股票應用程序，如何單行有一個名稱後跟當前的數字，然後+ - 指標股票漲跌多少。我非常喜歡黑色背景下的這種行設計，並且認爲它易於閱讀，所以這就是我爲什麼要這麼做的原因。目前，我正在嘗試創建一個與CSS結合的單行HTML，它會給我這種外觀和感覺，如果您願意，可以使用自定義列表項。創建自定義列表項目HTML，行間距

我有積極的\消極的指標，但無法弄清楚如何在同一個列表項目行中的空間和包括文本左側的此元素。理想情況下，佈局應該是這樣的：

STOCKNAME PREVTOTAL STOCKPOSORNEG

所有這些領域應該是相同的列表項排。由於我在使用無序列表的過程中遇到了一些麻煩，我還可以探索一個表格選項，但是想知道是否有辦法可以首先這樣做。以下是我正在通過TryIt編輯器進行的實驗：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     #rcorners1 { 
      border-radius: 7px; 
      background: #80ff80; 
      padding: 20px; 
      width: 90px; 
      height: 10px; 
      color: #FFF; 
     } 

     #makeLeft { 
      float: left; 
     } 

     #makeRight { 
      float: right; 
     } 

     #listitem { 
      list-style: none; 
      background-color: black; 
      border: .5px solid #efeff5; 
      padding: 1px; 
     } 
    </style> 
</head> 
<body> 
    <ul id="mylist"> 
     <li id="listitem"> 
      <p id="rcorners1"> 
       <span id="makeLeft"><strong>+</strong></span> 
       <span id="makeRight"><strong>1234.00</strong></span> 
      </p> 
     </li> 
    </ul> 
</body> 
</html>

來源

2017-01-10 Tastybrownies

對於初學者來說，你的標記有很多錯誤。看看我爲你創建的小提琴：https://jsfiddle.net/od7yd7x9/ –

這有幫助嗎？ http://codepen.io/anon/pen/jyboGq –

查看我的答案！ :)希望它可以滿足 –

這是如何解決的？

我試圖儘可能地接近原始股票應用程序。一些font大小可能會有點偏離，但這可能與您將要獲得的一樣好。

span{ 
 
    font-family: arial; 
 
    font-size: 24px; 
 
    color: #fff; 
 
} 
 
.container{ 
 
    width: 400px; 
 
    height: 200px; 
 
    background: #040404; 
 
} 
 
.row{ 
 
    position: relative; 
 
    width: calc(100% - 20px); 
 
    height: 29px; 
 
    padding: 13px 10px 13px; 
 
} 
 
.row.highlighted{ 
 
    background: #383838; 
 
} 
 
.name{ 
 
    float: left; 
 
} 
 
.price{ 
 
    display: inline-block; 
 
    margin-right: 3px; 
 
} 
 
.pn{ 
 
    padding-right: 5px; 
 
} 
 
.pn-con{ 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
} 
 
.main-pn{ 
 
    display: inline-block; 
 
    height: 29px; 
 
    padding: 3px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    border-radius: 5px; 
 
    background: #FD3C2F; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <span class="name">DOW J</span> 
 
     <div class="pn-con"> 
 
      <span class="price">18,109.80</span> 
 
      <div class="main-pn"> 
 
       <span class="pn">-</span> 
 
       <span class="val">53.19</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row highlighted"> 
 
     <span class="name">MSFT</span> 
 
     <div class="pn-con"> 
 
      <span class="price">47.58</span> 
 
      <div class="main-pn"> 
 
       <span class="pn">-</span> 
 
       <span class="val">0.04</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

下面是它工作JsFiddle！

這是非常可定製的，所有你需要做的是複製粘貼&的rows和span秒鐘內改變的值！

下面是實際股票應用程序的圖像以供參考！

希望它能幫助！ :-)

來源

2017-01-10 06:00:12

哇！這正是我正在尋找的東西，並且你將它釘在了T恤上。簡直太神奇了！正如它所表明的那樣，我需要更多的練習作爲CSS，希望有一天我會和你一樣好。我之前創建過網站，但CSS和展示總是花費我最長的時間，有時對我來說比實際的編碼部分更困難，哈哈。 – Tastybrownies

太棒了！ @Tastybrownies很高興，它幫助你！：D別擔心，有一天你會到達那裏;）只是很多時間和練習。：）祝你有美好的一天 –

創建自定義列表項目HTML，行間距

回答

相關問題