Question

我目前正在处理一个处理在线订单和交付的网站的一部分。它最初是基于表格的，但是要切换到列表格式。

HTML

<div data-role="collapsible">
                <h4>Items</h4>
                <ul>
                    <li class="product">Product 1</li>
                    <li class="producer"><a class="producerlink" target="_blank" href="http://www.hallsapplemarket.com">Producer 1</a></li>
                    <li class="price">$1.50/lb.</li>
                    <div class="input">
                    <li class="order"><input type="text" placeholder="amt. here" maxlength="15"></li>
                    </div>
                    <div class="underline"></div>
                </ul>

CSS

.product {
    float: left;
    margin: 0;
    font-size: 1em;
    display: inline;
    vertical-align: middle;
}
.producer {
    display: inline;
    font-size: 1em;
    margin: 0 20% 0 25%;
    text-align: center;
    vertical-align: middle;
}
.producerlink {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: inline;
    font-size: 1em;
    text-align: center;
    vertical-align: middle;
}
.price {
    font-size: 1em;
    margin: 0;
    display: inline;
}
.input {
    display: inline;
    padding-bottom: 15px;
}
.input .order {
    float: right;
    margin-right: 2%;
    margin-top: -1%;
    width: 100px;
    display: inline;
}

完整的模板链接在这里：

https://jsfiddle.net/TLittler/a5dg1zko/5/

我目前正在使用jQuery来构建运行良好的可折叠列表。但是，我很难对齐所有部分。我有利润可以限制产品，生产商和价格，但生产商和产品的价格却很高。和价格＆＃39;仓位与产品名称的长度有关。我试图将它们对齐在列中，因此每个带下划线的部分与相邻部分对齐，但我不确定如何在不使用表的情况下这样做。

Answer 1

我认为flexbox是一种很好的方法。将display: flex;添加到每个元素的ul和width: 100%;。我还建议使用边框或伪元素作为下划线。

粗略地说，这将是CSS：

ul {
   display: flex;
}
ul::after {
    content: '';
    display: block;
    width: 100%;
    margin: 4% 0 3% 0;
    padding-top: 25px;
    border-bottom: 1px solid black;
}
ul > li, ul > div {
   width: 100%;
}

以下是有关flexbox的更多信息：

部分水平列表如何在列中对齐？

1 个答案: