如何使我的DIV仅占用其包含的元素的宽度？

Question

我在一个更大的div中有一个小形式：

<template id="friend-component">
    <div>
        {{friend}}
        <div style="color:red;">{{error}}</div>
        <br />
        <input type="button" v-on:click="addFriend" />
    </div>
</template>

<script>
    Vue.component('friend', {
        template: '#friend-component',
        props: ['friend'],
        data: function(){
            return { error: '' };
        },
        methods: {
            addFriend: function () {
                //Call server and try to insert in database
                //Details left out for simplification
                this.error = 'You already added this friend';
            }
        }
    });
</script>

<friend :friend="selectedFriend"></friend>

我没有在任何地方指定CSS <div id="confirmEmailContainer"> <form class="edit_user" id="edit_user_2" action="/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="hWjOQEpKyMKVrk9+vWEeenl3D49rVe4hXFKgF4lza09xXRo0HENKMqGRpq9xUflWqbGJUdoxrmQrsksQWV5s7g==" /> <div class="field"> <label for="user_email">Email</label> <span class="required">*</span> <br> <div> <input size="30" style="display: inline;" type="text" value="myemail@msn.com" name="user[email]" id="user_email" /> <span id="emailConfirmedStatus"> <div class="unconfirmed" style="display: block"><img style="vertical-align:middle" src="/assets/x-mark-621493006f6052df98aa84352a33f21bccabfc670129ca9572009545745040d9.png" alt="X mark" width="16" height="16" /> Unconfirmed</div> <div class="confirmed" style="display: none"><img style="vertical-align:middle" src="/assets/checkmark-b87ae8ffea696b9c9587f26fdb656af7a21da4f7f73da01fc4bef9b35a1b9465.svg" alt="Checkmark" width="16" height="16" /> Confirmed</div> </span> </div> </div> <div class="actions buttonContainer"> <input type="submit" name="commit" value="Send Confirmation Email" id="submit" class="button btn" data-disable-with="Send Confirmation Email" /> </div> </form> </div> 属性，包括表单或其容器：

width

但是容器几乎占据了内容区域的整个宽度 - https://jsfiddle.net/70pgd6jn/。如何使表单仅占据其元素的宽度？

Answer 1

您应该将float: left添加到#confirmEmailContainer和overflow: hidden添加到#content

Answer 2

您可能正在寻找display: inline-block属性，这将允许您的容器元素仅占用它所需的空间。

#confirmEmailContainer {
    background-color: #fff;
    text-align: left;
    display: inline-block;
}