Question

如何将div设置为与其所包含的内容具有相同的尺寸，而不是更大的？

我目前的div宽度大于我放入其中的三个div的宽度。我怎么能得到它以适应内部div的大小？

这是我现在拥有的链接:: http://jsfiddle.net/jairajdesai/Fd5hQ/

HTML：

<div id="initial_options">
            <div class="option_button" id="option_1">
                <big>1</big> <span class="supplementary_text">text goes here</span>
            </div>
            <div class="option_button" id="option_2">
                <big>2</2></big> <span class="supplementary_text">text goes here</span>
            </div>
            <div class="option_button" id="option_3">
                <big>3</big> <span class="supplementary_text">text goes here</span>
            </div>
</div>

CSS：

#initial_options {
position:relative;
top:18%;
left:0;
z-index:10;
background-color:#eee;
}
.option_button{
width:20%;
border-radius:none;
}
#option_1{
background-color:#013adf;
}
#option_2{
background-color:#f7fe2e;
}
#option_3{
background-color:#ff0000;
}

Answer 1

像<span>这样的内联元素包含内容等等。您可以使用此功能，也可以将显示属性设置为inline。

div {
   display: inline;
}

但设置为inline的设置不会为您提供添加上/下边距和填充的任何选项。如果您也想添加它，则应使用inline-block作为属性。

div {
    display: inline-block;
}

Answer 2

使用display:inline-block;没有填充，边距和浮点数

div如何使其尺寸与内容完全相同

2 个答案: