Question

我的html代码非常简单，只是为了测试css max-width和flexbox显示。我的目标是将按钮宽度设置为190px，但它不起作用。如果我删除了.header中的显示css，它将起作用。请解释一下这里有什么问题？感谢

这是我的HTML代码：

＆＃13;

.header {
  padding:0;
  background-color: #16325C;
  height: 60px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.header ul {
  list-style:none;
  margin:0;
  padding:0;
}
.menu {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  width: 100%;
  display: inline-block;
}
.menu > .dropdown {
  display: block;
  max-width: 190px;
}
.menu > .dropdown > button {
  background-color: white;
  width: 100%;
  text-align: left;
  color: #16325C;
}

＆＃13;

<div class="header">
  <ul class="left">
    <li class="menu">
      <div class="dropdown">
        <button>
          Text
        </button>
      </div>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

max-width正在运行，它定义了框可以增长的最大宽度。您正在搜索width因为您在问题中的句子：

我的目标是将按钮宽度设置为190px，但它不起作用

所以试试：

.header {
  padding:0;
  background-color: #16325C;
  height: 60px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.header ul {
  list-style:none;
  margin:0;
  padding:0;
}
.menu {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  width: 100%;
  display: inline-block;
}
.menu > .dropdown {
  display: block;
  width: 190px;
}
.menu > .dropdown > button {
  background-color: white;
  width: 100%;
  text-align: left;
  color: #16325C;
}

<div class="header">
  <ul class="left">
    <li class="menu">
      <div class="dropdown">
        <button>
          Text
        </button>
      </div>
    </li>
  </ul>
</div>

Answer 2

您已将display: flex;分配给DIV .header，这意味着此是灵活容器，<ul class="left">是其中唯一的灵活项目，*不是{{其中的元素（直接父/子关系）。这可能是导致问题的（或至少一个）原因。

sub div中的max-width不起作用（父div有flex显示）

2 个答案: