创建自定义列表项HTML，带有行距

debugcn 发表于 Dev

美味布朗尼

我目前正在一个项目上，我想显示类似于苹果股票应用程序的内容，如何在一行中显示名称，后跟当前数字，然后显示股票的涨跌幅的+-指示器。我真的很喜欢这种黑色背景下的行设计，并认为它易于阅读，所以这就是为什么要这样做。目前，我正在尝试创建结合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>

GROVER。

如何为您工作？

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

这是实际股票应用程序的图片，仅供参考！