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

クラスの幅属性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 に答える