カスタムリストアイテムの作成HTML、スペースのある行

私は現在プロジェクトに取り掛かっています.Appleの株式アプリに類似したものを表示したいのですが、どの行が現在の番号に続いて+株式が以前からどれだけ上がったか下がったか。私は本当に黒い背景に対してこの行のデザインが好きで、読みやすいと思うので、私はそれをやりたいのです。現時点では、私はこの種類のルック・アンド・フィールを与えるCSSと組み合わせたHTMLの単一行を作成しようとしています。カスタムリストアイテムの作成HTML、スペースのある行

私は肯定的な否定的なインジケータを作成しましたが、同じリストアイテムの行内のこの要素の左にテキストを配置して埋め込む方法を理解することはできません。これらのフィールドのすべてが同じリスト項目の行にする必要があります

STOCKNAME PREVTOTAL STOCKPOSORNEG

：理想的には、レイアウトは次のようなものでなければなりません。私はこの順序でリストを使用してこのアプローチにいくつかの問題を抱えていたので、テーブルオプションを探索することもできましたが、最初にそうすることができる方法があるかどうかを見たいと思っていました。以下は、私がTryIt Editorで試していたものです：

<!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

うわー！これはまさに私が探しているもので、あなたはそれをティに釘付けにしました。ただ素晴らしい！それが示しているように、私はCSSとしてもっと実践する必要があります。私は以前にウェブサイトを作ったことがありますが、CSSとディスプレイには常に最長の時間がかかります。実際のコーディング部分であるLOLよりも難しい場合があります。 – Tastybrownies

恐ろしい！幸い@Tastybrownies、それはあなたを助けた！：Dは心配しないで、いつかそこに着くだろう;）ちょうど多くの時間と練習。：）良い一日を過ごしてください –

カスタムリストアイテムの作成HTML、スペースのある行

答えて

関連する問題