垂直对齐内部元素

Question

我正在努力解决我的具体问题，以垂直对齐多个内部元素。

我想要实现的目标看起来非常像这样（右侧的动作按钮与左侧文本垂直对齐，材质图标在有边界的ul元素中间对齐）：

使用materialize的valign-wrapper我能够垂直对齐动作按钮div，但我正在努力使用边界ul元素内的材质图标。我准备了一个jsfiddle来证明这一点：

https://jsfiddle.net/nafhLz1w/14/

注意： <div class="suggestion-actionbuttons right">“右”类执行浮动：右键;这个元素。 （物化框架）。

1. 我总是希望在一行中显示右侧的操作按钮
2. 右侧的两个材质图标应始终按照给定示例中所示对齐

Answer 1

您需要使用white-space:nowrap来阻止inline-block包装：

.suggestion-actionbuttons {
  white-space: nowrap;
}

Updated fiddle

Answer 2

小提琴链接 - https://jsfiddle.net/nafhLz1w/17/

使用Flex属性可以简化操作：

在css文件的末尾添加以下css类。

<li v-for="item in items" :key="item">
    <test-component :prop1="item">
    </test-component>
</li>