Question

我已经动态渲染了需要垂直对齐的元素。我只能对父级进行编辑。

元素之间没有空格或换行符。

我尝试使用flex，但是block物品收缩。我在block元素上添加了样式属性以证明这一点：

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

<div class="parent">
  <span>ITEM1</span><span>ITEM2</span><div style="background:pink;">ITEM3</div><div style="background:pink;">ITEM4</div><button>ITEM5</button><button>ITEM6</button>
</div>

Answer 1

根据Temani Afif's comment，以下是可行的解决方案：

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Setting all common block elements to width: 100% */
.parent > div, 
.parent > h1, 
.parent > h2, 
.parent > h3, 
.parent > h4, 
.parent > h5, 
.parent > h6
.parent > ol, 
.parent > ul,
.parent > pre,
.parent > address,
.parent > blockquote,
.parent > dl,
.parent > fieldset,
.parent > form,
.parent > hr,
.parent > noscript,
.parent > table {
  width:100%
}

<div class="parent">
  <span>ITEM1</span><span>ITEM2</span><div style="background:pink;">ITEM3</div><div style="background:pink;">ITEM4</div><button>ITEM5</button><button>ITEM6</button>
</div>

垂直对齐内联，内联块和块元素

1 个答案: