Question

我无法让两张名单并排坐下。第二个列表始终位于第一个列表的下方。他们需要不同的div，因为它们的颜色和填充方式不同。该列表也将非常长并通过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

<强> DEMO

<强> CSS

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

Answer 2

float:left会做到这一点。但是，我对您的代码做了一些其他安排。网站架构对于消除意大利面条代码非常重要。最后，尽量不要使用ID。请改用类。 ID只能在页面中使用一次，而您可以根据需要使用的类别;）

以下是DEMO

两个并排的名单

2 个答案: