Question

我在ul内li，div水平对齐。我使用了flex显示。这里div是父容器，所有样式如背景，高度，宽度都将在这里应用。 li元素有一些内部内容，如div，span，可以有文本/图标。每当我调整父div宽度/高度时，内部内容都应该调整。图标/文字（跨越李的孩子）需要居中。填充需要调整。我在下面的plunker中编辑了我的需求

plunker link

请您检查一下，让我知道任何选项。感谢任何建议。

这是我的css代码

 .table_ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height:100%;
  flex-wrap: wrap;
  list-style: none;
  padding:0px;
}
.cells_li {
  flex: 1 1 auto;
  border: 1px solid red;
  border-right:none;
  padding: .5em;
  text-align: center;
}

.cells_li:last-child {
  border-right: 1px solid red;
}
.main_div {
  background:gray;
  width:400px;
  height:20px;
}

下面是我的html页面

<div id="group" class="main_div">
        <ul class="table_ul">
            <li class="cells_li"><div><span>desktop</span></div></li>
            <li class="cells_li"><div><span>laptop</span></div></li>
            <li class="cells_li"><div><span>work</span></div></li>
        </ul>
    </div>

Answer 1

您可以将float:left分配给LI和height:100%，以使其获得父级高度。

/* Styles go here */
.table_ul {
  width: 100%;
  height:100%;
  list-style: none;
  padding:0px;

}
.cells_li {
  border: 1px solid red;
  border-right:none;
  padding: 0.5em;
  text-align: center;
  width:calc(33% - 1em);
  float:left;display: inline;
  height:calc(100% - 1em);
}

.cells_li:last-child {
  border-right: 1px solid red;
}
.main_div {
  background:gray;
  width:400px;
  height:150px;
}

如何根据父高/宽度变化调整内部元素？

1 个答案: