CSS 用于拖放 UX

Question

我应该先说我的 CSS 技能相当缺乏。

问题

我正在使用 angular 拖放指令 - angular-drop-and-drop-lists。当我将它切换为水平列表并尝试拖动框时，dndPlaceholder 元素（即灰色框）的样式与我想要的不一样。

plunkr

http://plnkr.co/edit/1BuPv6Rr4HoaNgyRzB1t?p=preview

placeholder css

.simple-demo ul[dnd-list] .dndPlaceholder {
    display: inline-block;
    background-color: #ddd;
    min-height: 42px;
    min-width: 100px;
    margin: 1px;
}

截图

---

所需分辨率

我想要的是 dndPlaceholder 与列表中的其他元素垂直对齐。红色方块标记了所需的位置。

Answer 1

您只需将 vertical-align: bottom; 添加到您的 .dndPlaceholder 样式规则中。