Question

我在区段容器中使用span元素来构建一组可由外部程序动态插入的结果。

期望的结果应如下所示：

但是，结果会将所有条目压缩在一起，将容器放在同一行：

标题部分非常简单，由一个部分和五个跨度组成：

<section class="titleholder">
    <span id="htlabelHI">Entry Name</span>
    <span id="htlabelHI">Parameter</span>
    <span id="htlabelHI">Param in List</span>
    <span id="htlabelHI">Param in List2</span>
    <span id="htlabelHI">Param in List3</span>
</section>

css如下：

.titleholder {
    display: flex;
    justify-content: space-around;
    text-align:center;
    border-top:solid;
    border-top-color:lightgray;
    border-top-width:thin;
    border-bottom:solid;
    border-bottom-color:lightgray;
    border-bottom-width:thin;
    font-family: Verdana;
    font-size: 10px;
}

结果部分的HTML稍微复杂一些：

<section class="results">    
    <div class="hazardResult">
        <span class="EntryName">11</span>
        <span class="Param">2</span>
        <span class="ParamList1">
            <ul>
                <li>1</li>
            </ul>
        </span>
        <span class="ParamList2">
            <ul>
                <li>1</li>
            </ul>
        </span>
        <span class="ParamList3">
            <ul>
                <li>1</li>
            </ul>
        </span>
    </div>
    <div class="hazardResult">
        <span class="EntryName">22</span>
        <span class="Param">2</span>
        <span class="ParamList1">
            <ul>
                <li>2</li>
            </ul>
        </span>
        <span class="ParamList2">
            <ul>
                <li>2</li>
            </ul>
        </span>
        <span class="ParamList3">
            <ul>
                <li>2</li>
            </ul>
        </span>
    </div>
</section>

CSS并不太相似：

.results {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-bottom:solid;
    border-bottom-color:lightgray;
    border-bottom-width:thin;
    height: 150px;
    font-size: 10px;
    padding-top: 4px;    
    padding-left: 20px; 
    text-align:center;
}

我觉得我需要做些什么来区分＆＃39; div＆＃39;每个hazardResult的元素，但设置宽度只是水平移动元素。该表的最大宽度为900px。

我也试过单独设置每个跨度的宽度，但这没有产生任何结果。

我还可以尝试将间距均匀化？请记住，div的高度必须适应最长的列表。

难以在HTML部分中对齐一组结果

0 个答案: