Question

我有一个无序列表，基于我的样式表将有1,2或3列。我想为列表创建一个标题，它也应该响应屏幕大小，所以如果我有2列列表，我应该看到2个标题与列表对齐，如果我有3列，则为3。项目列表是动态的，因此可以列出任意数量的项目。例 http://jsfiddle.net/francoist/AtX4K/1/

注意：下图中的Log No Dimension（标题）是我试图添加的内容。

结果 Result

CSS

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

HTML

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

Answer 1

试试这个：

尝试使用％。

，而不是使用px（像素）作为大小

例如：font-size：300％;

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

Answer 2

我不建议您使用此功能，因为它充斥着不正确的编程习惯，可能效率不高。

它在第一页加载时工作正常，但在窗口调整大小时，它变得“小”忙乱。但是，我今天想挑战自己，我接受了它。

这个函数基本上做的是它获取指定HTML标记的所有出现的坐标（在这种情况下为labeldetailsmall），选择最靠近顶部的元素并在删除之前的每个标题时附加标题插入标题元素。

CSS很模糊，需要改进（因为元素有一些重叠）。

再一次，使用此风险需要您自担风险......我只是想玩代码，最后还是这样。

我希望您能够了解单向，以达到您想要的效果。

[增订]

jQuery：

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

CSS（需要处理）：

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

我希望这可以some用于某人！

html多列无标题列表与标题

2 个答案: