2013-05-25 96 views
0

如何形成一個尺寸與它所包含的內容尺寸相同的尺寸而不是更大的尺寸?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; 
} 
+0

你需要向我們展示到目前爲止你已經嘗試了什麼... – mfreitas

+0

顯示:inline-block的;?沒有邊距,襯墊和花車 –

+0

給我們一些工作。給一些代碼。 –

回答

1

內聯元素如<span>包裝圍繞內容和更多。您可以使用此功能,也可以將顯示屬性設置爲inline

div { 
    display: inline; 
} 

但是設定顯示爲inline不會給你任何選項添加頂部/底部margin和padding。如果你也想添加,你應該使用inline-block作爲屬性。

div { 
    display: inline-block; 
} 
0

使用display:inline-block;沒有補白,利潤率和花車