html - 两个列表并排

Question

我无法让两个列表并排放置。第二个列表始终位于第一个列表的正下方。他们需要不同的 div，因为它们的颜色和填充方式不同。该列表也将非常长并通过 JS 填充，所以我不能简单地构建具有相对位置的列表

JS FIDDLE

HTML

<div id="left_list">
   <div id="item_name">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>


<div id="item">
   <ul>
    <li>some name</li>
    <li>some name</li>
    <li>some name</li>
   <ul>
</div>

CSS

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

Answer 1

DEMO

CSS

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