Question

我想为JQPlot图表制作传奇。我正在用无序列表制作传奇。我有一个列表并使用服务器的响应创建li。 ul是......

<ul class='tab' id='list1'></ul>

创建li的JS代码：

$(document).ready(function () {
for (var i = 0; i < 30; i++) {
    $('#list1').append($('<li>', {
        'style': "width: 15px; background:#987654;'"
    }));
    $('#list1').append($('<li>Helloooooooooooooooooo | 09</li>'));
}
});

li alignment的CSS代码

.tab {
list-style: none outside none;
width: 120px; // list width must be 120px
height: 300px; // list height must be 300px
overflow-x: auto;
overflow-y: auto;
}
.tab li {
border: solid 1px blue;
text-align: center;
font-size: 12px;
float: left;
display: inline;
height: 15px;
width: 200px;
}

小提琴页面： http://jsfiddle.net/ankitlamba009/W9LXf/

因为，我不擅长CSS，所以我没有得到同样的支持。请帮忙......

Answer 1

首先，将您的ul 100%宽度和display:inline-block; ....放在120px宽ul中，您如何期望200px li出现？< / p>

demo

html,
body {
  width: 100%;
  margin: 0;
  padding: 0
}

ul.tab {
  border: 1px solid red;
  list-style: none outside none;
  width: 150px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: inline-block;
}

ul.tab > li {
  border: solid 1px blue;
  float: left;
  max-width: 70px;
  word-break: break-all;
}

<强> JS

$(document).ready(function() {
  for (var i = 0; i < 30; i++) {
    $('#list1').append($('<li>Helloooooooooooooooooo | 09</li>'));
  }
});

Answer 2

你真的需要两倍<li>元素吗？这是我的建议：

<强>演示 http://jsfiddle.net/W9LXf/6/

javascript代码

$(document).ready(function () {
    for (var i = 0; i < 30; i++) {
        var li = $('<li>Helloooooooooooooooooo | 09</li>');
        var color = $('<span>').addClass('color').css({
           backgroundColor: "#987654"
        });
        li.prepend( color );
        $('#list1').append( li );
    }
});

想把两个'li'放在同一行吗？

2 个答案: