Question

以下是我要创建的菜单。

我希望菜单项div在宽度上是独立的，并且只有我认为是默认行为的文本所需的宽度。我哪里出错了？

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

$wp_rewrite->flush_rules();

Answer 1

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

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

将float: right;添加到.patleLast, .patleFirst, .patle - 这会缩小div以适合其内容
将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>

Answer 2

这是块元素的正确行为。除了在语义上更合适的是使用列表元素

https://jsfiddle.net/bkv9rzr2/

File "<ipython-input-1-72fbbcfe2587>", line 1, in <module>
  import cv2

Answer 3

这不是典型的div行为。默认情况下，display: block元素具有display: inline-block，它会尝试将它们拉伸到容器的整个宽度。您将要使用float: left或<br/>。这两个都会使得div占用内容的大小，但是他们也会尝试并排排列元素，而不是让它们相互影响。

一种解决方法是在每个元素后面插入:after个标记。或者添加display: block个curl.cainfo的伪选择器。

div-width取决于兄弟的宽度

3 个答案: