0

如何形成一个 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;
}
4

2 回答 2

1

像内联元素一样<span>环绕内容等等。您可以使用它，也可以将显示属性设置为inline.

div {
   display: inline;
}

但是，设置为显示inline不会为您提供任何添加顶部/底部边距和填充的选项。如果你也想添加它，你应该使用inline-blockas 属性。

div {
    display: inline-block;
}
于 2013-05-25T12:50:19.310 回答
0

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

于 2013-05-25T12:47:18.420 回答