Question

我无法弄清楚如何将列表放在水平位置，我已经玩了几乎所有我真的很感激，如果有人给我他们的建议。 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>

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

演示：Fiddle

Answer 2

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

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

.source{
    display:block;
    overflow:auto;
    width:200px;
}
.item{
    float:left;
    overflow:auto;
}

Answer 3

source类的宽度属性限制列表水平移动。摆脱此属性，或将其扩大，并将display:inline添加到item课程，您应该在路上。

Answer 4

（不能投票给预览答案谁真的很好）但我会添加

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

在元素被删除时阻止新的垂直位置。

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

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

如何水平定位这些div？

4 个答案: