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

Question

我想将 .editBokningar div 设置为在我添加内容时动态更改。现在它几乎占据了整个屏幕，因为 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>

Answer 1

由于EditBoking是div，是 block 元素，所以不需要定义width: 100%，默认会占满整个空间

但是对于你的问题，

只是删除

height: 100%;

来自代码。