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

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 对齐的 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;
}

fiddle 页面: http://jsfiddle.net/ankitlamba009/W9LXf/

因为我不擅长 CSS，所以我没有在同一行中得到我的 li。 请帮助...

Answer 1

首先，给你的 ul 100% 宽度和 display:inline-block;....在 120px 宽 ul 中，怎么做你希望 200px li 出现？？？

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