並排的兩個列表

Question

我不能讓兩個列表並排放置。 第二個列表始終位於第一個列表的下方。 他們需要不同的div，因為它們的顏色和填充方式會有所不同。 該列表也將非常長，並且通過JS填充，因此我不能簡單地使用相對位置來構建列表

JS菲德爾

的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

演示

的CSS

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

Answer 2

float:left可以解決問題。 但是，我對您的代碼做了其他安排。 網站架構對於消除意大利面條式代碼非常重要。 最后，盡量不要使用ID。 改用類。 ID是您只能在頁面中使用一次，而類則可以根據需要使用;;）

這是演示