div-width 取决于同级的宽度

Question

以下是我正在尝试创建的菜单。

我希望菜单项 div 的宽度独立，并且宽度仅与我认为是默认行为的文本所需的宽度相同。我哪里做错了？

.patleLast {
  padding: 10px;
  border-radius: 1000px 0px 1000px 1000px;
  background-color: black;
  width: auto;
  margin: 1px;
}

.patleFirst {
  padding: 10px;
  border-radius: 1000px 1000px 0px 1000px;
  background-color: black;
  margin: 1px;
}

.patle {
  padding: 10px;
  border-radius: 1000px 0px 0px 1000px;
  background-color: black;
}

.topPan {
  position: fixed;
  top: 10px;
  right: 0px;
  color:white;
  font-family: 'Raleway', sans-serif;
  z-index: 1000;
  text-align: right;
}

<div class="topPan">
  <div class="patleFirst">
    Book Tickets
  </div>
  <div class="patle">
    Screening Schedule
  </div>
  <div class="patleLast">
    Book Tickets
  </div>
</div>

Answer 1

这是预期的行为。sdisplay的默认值始终占据整个宽度。divblock

要实现您想要的行为，请对 CSS 进行以下更改：

• 添加float: right;到.patleLast, .patleFirst, .patle- 这将缩小divs 以适应其内容
• 添加clear: both;到.patleLast, .patleFirst, .patle- 这将确保它们换行到新行

通过浮动，div宽度被计算为“收缩以适合”。

如果“width”计算为“auto”，则使用的值为“shrink-to-fit”宽度。

浮动、不可替换元素 ( https://www.w3.org/TR/CSS2/visudet.html#float-width )

.patleLast {
  padding: 10px;
  border-radius: 1000px 0px 1000px 1000px;
  background-color: black;
  width: auto;
  margin: 1px;
}

.patleFirst {
  padding: 10px;
  border-radius: 1000px 1000px 0px 1000px;
  background-color: black;
  margin: 1px;
}

.patle {
  padding: 10px;
  border-radius: 1000px 0px 0px 1000px;
  background-color: black;
}

.patleLast, .patleFirst , .patle {
  clear: both;
  float: right;
}

.topPan {
  position: fixed;
  top: 10px;
  right: 0px;
  color:white;
  font-family: 'Raleway', sans-serif;
  z-index: 1000;
  text-align: right;
}

<div class="topPan">
  <div class="patleFirst">
    Book Tickets
  </div>
  <div class="patle">
    Screening Schedule
  </div>
  <div class="patleLast">
    Book Tickets
  </div>
</div>