User:Hefner/Sandbox7: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 3: | Line 3: | ||
<h3>S Tier</h3> | <h3>S Tier</h3> | ||
<ul class="sortable"> | <ul class="sortable"> | ||
<li> | <li id="item1" draggable="true">Item A</li> | ||
<li> | <li id="item2" draggable="true">Item B</li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 10: | Line 10: | ||
<h3>A Tier</h3> | <h3>A Tier</h3> | ||
<ul class="sortable"> | <ul class="sortable"> | ||
<li> | <li id="item3" draggable="true">Item C</li> | ||
<li | <li id="item4" draggable="true">Item D</li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 23: | Line 17: | ||
<style> | <style> | ||
.tierlist { display: flex; gap: 20px; flex-wrap: wrap; } | .tierlist { | ||
display: flex; | |||
gap: 20px; | |||
flex-wrap: wrap; | |||
} | |||
.tier { | .tier { | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
Revision as of 13:12, 8 May 2025
S Tier
- Item A
- Item B
A Tier
- Item C
- Item D
<style>
.tierlist {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.tier {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
min-height: 150px;
background: #f9f9f9;
border-radius: 8px;
}
.tier h3 {
text-align: center;
margin-top: 0;
}
.sortable {
list-style: none;
padding: 0;
margin: 0;
min-height: 50px;
}
.sortable li {
padding: 6px 8px;
margin: 6px 0;
background-color: #e0e0e0;
border-radius: 4px;
cursor: grab;
}
</style>