2

我无法弄清楚如何将列表水平放置，如果有人给我他们的建议，我几乎玩过所有我会非常感激的东西。 http://jsfiddle.net/py3DE/74/

<div class="source">
<div class="item"><span class="closer"></span>s1</div>
<div class="item"><span class="closer"></spanHow>s2</div>
<div class="item"><span class="closer"></span>s3</div>
</div>
<div class="target">
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
</div>
4

4 回答 4

1

尝试

.item { height:20px; margin: 5px; padding:5px; border:1px solid gray; background-color: #cd8; position: relative; display: inline-block;}

.target > div {
    width: 40px;
    display: inline-block;
}

演示：小提琴

于 2013-05-13T03:09:22.110 回答
1

对于这类东西，您需要为源添加宽度。见http://jsfiddle.net/harendra/2phuW/1/

您需要按以下方式更改 css。

.source{
    display:block;
    overflow:auto;
    width:200px;
}
.item{
    float:left;
    overflow:auto;
}
于 2013-05-13T03:22:15.387 回答
0

您在班级上的 width 属性source限制了列表水平。摆脱这个属性，或者让它更宽，然后添加display:inline到item类中，你应该就可以了。

于 2013-05-13T03:08:50.373 回答
0

（不能投票支持真正优秀的预览答案）但我会添加

.target > div {
    width: 25px;
    height:30px;
    padding:none;
    display: inline-block;
    vertical-align:top;
}

以防止删除元素时出现新的垂直位置。

演示：http: //jsfiddle.net/Cf59n/2/

（我只是从预览答案的小提琴中添加这一行

于 2013-05-13T03:18:43.203 回答