Javascript 带标题的html多列无序列表

我有一个无序列表，基于我的样式表，它将有1、2或3列。 我想为列表创建一个标题，它还应该响应屏幕大小，因此如果我有两列列表，我应该看到两个标题与列表对齐，如果我有3列，则看到3个标题与列表对齐。 项目列表将是动态的，因此可以列出任意数量的项目。 实例

注意：下面图片中的Log No Dimension标题是我要添加的

结果

CSS

HTML

试试这个：

尝试使用%而不是像素作为大小

例如：字体大小：300%

---

注意：%value可以根据需要增加或减少。

我不建议您使用此函数，因为它充斥着不正确的编程实践，可能效率不高

它在第一次加载页面时运行良好，但在调整窗口大小时，它会变得“有点”忙碌。 然而，今天我想挑战自己，我接受了挑战

此函数的基本功能是获取指定HTML标记labeldetailsmall（在本例中为小标记）的所有出现点的坐标，选择最靠近顶部的元素，并在删除之前插入的标题元素的同时向每个元素追加标题

CSS是模糊的，需要改进，因为有一些元素重叠

再一次，使用它的风险由你自己承担。。。我只是想玩一下代码，结果就是这样

我只是希望你能想出一种方法来实现你想要的

[更新]

jQuery：

---

我希望这对某些人有用

您所问的本质上是动态的，IMHO，这在HTML中是不可能的，请将问题标记为jQuery/javascript！：我不确定我是否同意，但将标记为jQuery/javascript确保他们的解决方案不止一个。动态部分只是意味着您可以在1、2或3列中拥有无限项。如果手动添加内容，则这可能是可能的，但这将涉及您决定使用1、2或3列。你会手动添加内容吗？还是动态完成？内容是手动添加的，但存储在绑定到的viewmodel中。因此，我认为手动和动态的主题实际上混淆了主题，因为样式表将决定其1、2、3列？仅供将来参考，而不是使用@media来确定列，我使用的是列宽。代码更少，效果也很好。谢谢你的提示，我会添加它，但这并不能解决添加标题的问题？嗨，Thauwa，我会尝试一下，让你知道它是如何运行的。我确实修改了你的代码，但你在正确的轨道上，但它有一些奇怪的位置。对不起，我没有，漫长的一天。我已经做了一两次更新，看看这个演示，你可以看到我想要完成的东西，但它在移动浏览器上不起作用。演示：嗨，Thauwa，这个看起来可以。看看这个

    body{
     font-family: "Tahoma";
    }

    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    position: relative;
    border-bottom: 1px dotted #ccc;
    list-style: none;
    list-style-type: none;
    width: 100%;
    padding: 0;
}

ul li a {
    float: right; /* width of icon + whitespace */
    padding: 5px;
    font-size: 14px;
}

labeltotal{
    float: right;
    font-size: 24px;
}

labeldetail{
    font-size: 24px;
}
labeldetailsmall{
    font-size: 14px;
}
@media  (min-width:  480px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media (min-width:  568px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}
@media  (min-width:  768px) {
    ul {
    border-bottom: 1.5px solid #ccc;
    border-top: 1.5px solid #ccc;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    }
}

<ul>
<li>
<labeldetailsmall>LOG000001 </labeldetailsmall><labeldetail>2,1 x2,3</labeldetail>        
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
<labeldetailsmall>LOG000002 </labeldetailsmall><labeldetail>2,1 x 2,3</labeldetail>
<a href="#" onclick="alert('Hello World')">edit</a>
<a href="#" onclick="alert('Hello World')">delete</a>
</li>
<li>
</ul>

function addThoseHeadings(elementTagInput, yourHEADING){ 

    var elementTag = $( elementTagInput );

    var allElementsObject = {positions : {}};

    $(elementTag).each(function( index ) {
        var theOffset = $(this).offset();
        allElementsObject.positions[index] = {
            left: theOffset.left,
            top: theOffset.top
        };
    });

    var arr = Object.keys( allElementsObject ).map(function ( key, subkey ) { return allElementsObject[key][subkey]['top']; });
    var minimumOffset = Math.min.apply( null, arr );

    $.each(allElementsObject.positions, function( indexUnwanted, valueOffsets ) {
        if( valueOffsets.top == minimumOffset ){
            var elementToAppendTo = document.elementFromPoint( valueOffsets.left, valueOffsets.top );
            $( elementToAppendTo ).before( '<span class="replaceThese" style="left:'+(valueOffsets.left)+'px;top:'+(valueOffsets.top-35)+'px;">'+yourHEADING+'</span>' );
        }
    });

}

var yourHEADING = "Log No";

addThoseHeadings( "labeldetailsmall", yourHEADING );

$(window).resize(function() {
    $( ".replaceThese" ).remove();
    addThoseHeadings( "labeldetailsmall", yourHEADING );
});

span {
    display: inline-block;
    position: fixed;
}