创建自定义列表项HTML，行与间距

Question

我目前正在从事一个项目，我想显示类似于苹果股票应用程序的内容，如何在一行中显示名称，后跟当前数字，然后显示股票的涨跌幅。 我真的很喜欢这种黑色背景下的行设计，并认为它易于阅读，所以这就是为什么要这样做。 目前，我正在尝试创建结合CSS的HTML单行，这将给我这种外观和感觉，如果可以的话，还提供了一个自定义列表项。

我做出了肯定\\否定指示符，但无法弄清楚如何在同一列表项行中将此元素左侧的文本间隔和包含在内。 理想情况下，布局应如下所示：

库存名称上一个库存

所有这些字段应在同一列表项行中。 由于我在使用无序列表时遇到了一些麻烦，因此我也可以探索一个表选项，但想看看是否有一种方法可以首先以这种方式完成。 以下是我通过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>

Answer 1

如何为您工作？

我试图使其尽可能接近原始股票应用。 某些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内的值！

这是实际股票应用的图片供参考！

希望能帮助到你！ :-)

创建自定义列表项HTML，行与间距

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-10 06:00:12

创建自定义列表项HTML，行与间距

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-10 06:00:12

解决方案1
1 已采纳 2017-01-10 06:00:12