Question

我目前正在开展一个项目，我希望展示一些类似于Apple股票应用程序的东西，一行有一个名字后跟一个当前数字，然后一个+ - 指示该股票上涨或下跌多少从以前。我非常喜欢黑色背景下的这种行设计，并认为它易于阅读，所以这就是我想要这样做的原因。目前我正在尝试创建一个单独的HTML行与CSS相结合，这将给我这种外观和感觉，如果你愿意的话，这是一个自定义列表项。

我有正面\负面指标，但无法弄清楚如何空间并在同一列表项行中包含此元素左侧的文本。理想情况下，布局应该是这样的：

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>

Answer 1

这对你有什么影响？

我试图让它尽可能接近原始股票应用程序。有些font尺寸可能有些偏差，但这可能与你想要的一样好。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这是一个有效的JsFiddle！

它可以自定义，您需要做的就是 copy＆amp;粘贴 rows，并更改span s！

中的值

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

希望它有所帮助！： - ）

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

1 个答案: