如何根据内容动态设置 div 的宽度和高度

debugcn 发表于 Dev

阿拉木图

我想将.editBokningardiv设置为在添加内容时动态更改。现在它几乎占据了整个屏幕，因为100%. 我怎样才能以最好的方式实现这一目标？此处的代码段高度不准确。在片段中，高度保持接近内容。

    .EditBoking {
        width: 100%;
        height: 100%;
        margin: 15px 0px 15px 0px;
        background-color: #E1E777;
        border-radius: 10px;
        text-align: center;
        padding-top: 15px;
    }

    .title {
        font-weight: bold;
        color: #FF3333;
    }

    .listOneRow {
        display: inline-block;
        font-weight: bold;
    }
        ul {
        list-style-type: none;
        padding: 0;
    }

       <div class="EditBoking">
                <div class="title">
                    Din nuvarande bokning
                </div>
                <div>
                    <ul class="listOneRow">
                        <li>
                            <span>Startdatum: 2017-12-12</span>
                        </li>
                        <li>
                            <span>Slutdatum: 2017-12-12</span>
                        </li>
                        <li>
                            <span>Program: some program</span>
                        </li>
                        <li>
                            <span>Miljö: Arrendator</span>
                        </li>
                    </ul>
                </div>
            </div>

陪伴阿菲

只需使您的元素内联块并删除高度/宽度属性：

.EditBoking {
  display:inline-block;
  margin: 15px 0px 15px 0px;
  background-color: #E1E777;
  border-radius: 10px;
  text-align: center;
  padding-top: 15px;
}

.title {
  font-weight: bold;
  color: #FF3333;
}

.listOneRow {
  display: inline-block;
  font-weight: bold;
}

ul {
  list-style-type: none;
  padding: 0;
}

<div class="EditBoking">
  <div class="title">
    Din nuvarande bokning
  </div>
  <div>
    <ul class="listOneRow">
      <li>
        <span>Startdatum: 2017-12-12</span>
      </li>
      <li>
        <span>Slutdatum: 2017-12-12</span>
      </li>
      <li>
        <span>Program: some program</span>
      </li>
      <li>
        <span>Miljö: Arrendator</span>
      </li>
    </ul>
  </div>
</div>

<div class="EditBoking">
  <div class="title">
    Din nuvarande bokning
  </div>
  <div>
    <ul class="listOneRow">
      <li>
        <span>Startdatum: 2017-12-12</span>
      </li>
      <li>
        <span>Slutdatum: 2017-12-12</span>
      </li>
    </ul>
  </div>
</div>

<div class="EditBoking">
  <div class="title">
    Din nuvarande bokning
  </div>
  <div>
    <ul class="listOneRow">
      <li>
        <span>Startdatum: 2017-12-12</span>
      </li>
      <li>
        <span>Slutdatum: 2017-12-12</span>
      </li>
    </ul>
    <ul class="listOneRow">
      <li>
        <span>Startdatum: 2017-12-12</span>
      </li>
      <li>
        <span>Slutdatum: 2017-12-12</span>
      </li>
    </ul>
    <ul class="listOneRow">
      <li>
        <span>Startdatum: 2017-12-12</span>
      </li>
      <li>
        <span>Slutdatum: 2017-12-12</span>
      </li>
    </ul>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。