Question

我在ul内有2-3 ul。 li有一个设定的宽度。 li标签中的文字会有所不同，但我们希望每个标签的最小宽度保持在100px。对于包含更多文字的li，我们希望确保左侧和右侧有15个像素的填充。

理想情况下，所有li的宽度都相同，即它们都采用最大min-width:100px的宽度。 li确保当<ul> <li class="li-1">--- --------</li> <li class="li-2">------- ------ ------</li> <li class="li-3">---</li> </ul>全部低于100像素时，所有ul { display: block; width: 450px; } li { display: inline-block; padding: 5px 15px; border-radius: 3px; box-sizing: border-box; border: 1px solid black; min-width: 100px; text-align: center; } .li-1 { background-color: green; } .li-2 { background-color: yellow; } .li-3 { background-color: cyan; }的宽度都相同，但如果一个高于此宽度，则其他"Ambrosia,Restore Health, , , "必须向上扩展才能匹配。

我可以仅使用css / html实现此目的吗？我相信我可以通过javascript轻松解决这个问题，但我想在没有它的情况下解决它。

的jsfiddle： https://jsfiddle.net/a8ho4b04/3/

HTML：

/,\s*,/u

的CSS：

#"(?u),\s*,"

Answer 1

<强> Flexbox的

＆＃13;

<%@page import="Basiccalculator.*;" %>

＆＃13;

ul {
  width: 450px;
  display: flex;
  list-style: none;
}
li {
  flex: 1;
  border-radius: 3px;
  padding: 5px 15px;
  box-sizing: border-box;
  border: 1px solid black;
  min-width: 100px;
  text-align: center;
}
.li-1 {
  background-color: green;
}
.li-2 {
  background-color: yellow;
}
.li-3 {
  background-color: cyan;
}

＆＃13;

CSS表格

＆＃13;

<ul>
  <li class="li-1">--- --------</li>
  <li class="li-2">------- ------ ------</li>
  <li class="li-3">---</li>
</ul>

＆＃13;

ul {
  width: 450px;
  display: table;
  table-layout: fixed;
  list-style-type: none;
}
li {
  display: table-cell;
  border-radius: 3px;
  padding: 5px 15px;
  box-sizing: border-box;
  border: 1px solid black;
  min-width: 100px;
  text-align: center;
}
.li-1 {
  background-color: green;
}
.li-2 {
  background-color: yellow;
}
.li-3 {
  background-color: cyan;
}

＆＃13;

Answer 2

您可以为它们指定固定宽度（以像素为单位）或最小宽度（可以是相对宽度）。

如何让兄弟元素占据最大兄弟的宽度？

2 个答案: