Html 两张并列的单子

我不能把两张单子并排放在一起。 第二个列表始终位于第一个列表的正下方。 它们需要不同的div，因为它们的颜色和填充方式不同。 该列表也将非常长，并通过JS填充，因此我不能简单地使用相对位置构建列表

HTML

CSS

#left_list {
    background-color: #CDCDCD;
    float: left; /* add this new style in css*/
    width: 208px;
}

---

float:left

就可以了。但是，我对您的代码做了一些其他安排。站点架构对于消除意大利面代码非常重要。最后，尽量不要使用ID。改用类。ID在页面中只能使用一次，而类可以根据需要使用多少；）

这是你的电话号码

#item_name {
 color: #0000FF;
 font-size: 17px;
 height: 100%;
 margin: 0;
 padding: 0;
 white-space: nowrap;
 width: 208px;
 text-align:right;
}    

#item_name li{
  padding-bottom: 0px;
}

#item {
 margin-left: 208px;
 padding: 0;
 font-size: 17px;
 white-space: nowrap;
 background-color: red;
}

#item li{
list-style-type: none;
}

#left_list {
 background-color: #CDCDCD;
 width: 208px;
}

ul {
 list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
*display: inline;
margin-right: 22px;
 }

#left_list {
    background-color: #CDCDCD;
    float: left; /* add this new style in css*/
    width: 208px;
}