html - div-width 取决于 sibling 的宽度

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

这是预期的行为。 div 的默认display 是block，它将始终占据整个宽度。

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

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

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

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

float 的、不可替换的元素 ( 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>