Question

只是想知道是否有更简单的方法来实现这一目标。这是我的困境，我有8个类别，我想要每行4个，他们必须左对齐上面的类别，所以他们都正确流动。我的第一个想法是创建每个2 li的4 ul并使用内联块显示我的ul。但我想知道使用css表是否更容易。任何建议？

这是代码

            <ul id="nav-one" class="products-header">
                <li><a>Lasers/Inkjet Sheet Labels</a></li>
                <li><a>Thermal Labels &amp; Ribbon</a></li>
            </ul>
            <ul id="nav-one" class="products-header">
                <li><a>Mailing Tabs &amp; Seals</a></li>
                <li><a>Contionous Pressure Sensitive Labels</a></li>
            </ul>
            <ul id="nav-one" class="products-header">
                <li><a>Tray &amp; Bag Tags</a></li>
                <li><a>Heat Seal Label Paper</a></li>
            </ul>
            <ul id="nav-one" class="products-header">
                <li><a>Repositionable Postal Notes</a></li>
                <li><a>Paper Labels</a></li>
            </ul>

CSS

.footer-products,
.products-header {
    display: inline-block;
}

Answer 1

在每个HTML页面上，您只能拥有一个ID。因此，你的所有人都不能将导航作为他们的身份。但是，您可以将其添加为类。如：

$(function () {
$('#container').highcharts({
    chart: {
        renderTo: 'container',
        animate: false,
    },
    title: {
        text: 'test'
    },
    xAxis: {
        categories: ['1', '2', '3', '4', '5']
    },
    tooltip: {
        yDecimals: 2
    },
    plotOptions: {
        series: {
            allowPointSelect: false,
            point: {
                events: {
                    click: function () {
                        switch (this.category) {
                            case '1':
                                $('#one').val(this.y);
                                break;
                            case '2':
                                $('#two').val(this.y);
                                break;
                            case '3':
                                $('#three').val(this.y);
                                break;
                            case '4':
                                $('#four').val(this.y);
                                break;
                            default:
                                $('#five').val(this.y);
                                break;
                        }
                    },
                    drag: function (e) {
                        $('#drag').html(
                            'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
                    },
                    drop: function () {
                        $('#drop').html(
                            'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
                    }
                }
            }
        }
    },
    series: [{
        name: 'test',
        data: [30, 50, 74, 90, 123],
        draggableY: true,
        dragMinY: 0,
        dragMaxY: 200,
        type: 'column',
        minPointLength: 2
    }]
});
var chart = $('#container').highcharts();
var pomY = Number($('#one').val());
$('#plus').click(function () {
    pomY += 2;
    chart.series[0].data[0].update(pomY);
    $('#one').val(pomY);
});
$('#minus').click(function () {
    pomY -= 2;
    chart.series[0].data[0].update(pomY);
    $('#one').val(pomY);
});

});

但是，我会以不同的方式解决它。我不确定你的意思是，你希望将它们分成两排，例如：

<ul class="nav-one products-header">
    <li><a>Lasers/Inkjet Sheet Labels</a></li>
    <li><a>Thermal Labels &amp; Ribbon</a></li>
</ul>

或者在两列中：

1 2 3 4
5 6 7 8

我会假设你想要它们作为列。

这就是我要做的事情：

<强> HTML

<强> CSS

<div class="container">
 <ul class="nav-ul">
  <li class="newline"><a>Lasers/Inkjet Sheet Labels</a></li>
  <li><a>Thermal Labels &amp; Ribbon</a></li>
  <li class="newline"><a>Mailing Tabs &amp; Seals</a></li>
  <li><a>Contionous Pressure Sensitive Labels</a></li>
  <li class="newline"><a>Tray &amp; Bag Tags</a></li>
  <li><a>Heat Seal Label Paper</a></li>
  <li class="newline"><a>Repositionable Postal Notes</a></li>
  <li><a>Paper Labels</a></li>
 </ul>
</div><!-- container -->

此代码尚未经过测试

双线水平导航菜单

1 个答案: