外部div容器中内部div周围的边框

Question

I have the code at the following link jsFiddle . I want border just around the inner content, instead of stretching it.

Tried the following:

• clear fix with div
• Overflow:hidden for the container div

That did not work. It should work in IE8 and above, Chrome and FF.

HTML:

<div class="ptr" >
  <div><span>Program Type</span></div>
  <div>
    <input type="radio" id="dc" checked>
      <span>Cust</span>
     <input type="radio" id="tu">
       <span>User</span>
     <input type="radio" id="b">
       <span>All</span>
   </div> 
   <div style="clear:both; line-height:0">&nbsp;</div>
 </div>

CSS:

div.ptr {
  border: 1px solid #bbccbb;
}

Answer 1

Divs are display:block elements by default. So it will always take up the whole width available, unless you set otherwise. One way for that is to set it display:inline-block

div.program-type-row {
    border: 1px solid #bbccbb;
    display: inline-block;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

http://jsfiddle.net/3oxrdyug/13/

EDIT

According to your comments bellow, you really need a wrapper to set the border around the content, despite the container's width... So wrap the content in a div, and set the border and display:inline properties to this wrapper, and center it setting the container as text-align: center;

http://jsfiddle.net/3oxrdyug/14/

HTML:

<div name="userTypeOptions" class="program-type-row" >
    <div id="wrapper">
      <div><span class="form-field label">Program Type</span></div>
      <div>
          <input type="radio" id="dwcust" name="userType" checked />
            <span class="form-field label">DW Customer</span>
            <input type="radio" id="tusr" name="userType" />
            <span class="form-field label">Trail User</span>
            <input type="radio" id="both" name="userType" />
           <span class="form-field label">All</span>
      </div> 
      <div style="clear:both; line-height:0">&nbsp;</div>
    </div>
</div>

CSS:

div.program-type-row {
    text-align: center;
}

#wrapper {
    border: 1px solid #bbccbb;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    display: inline-block;
}

Answer 2

You should make a wrapper, containing the radio buttons. Then give the wrapper 'display:table;' and the radio buttons 'display:table-cell' CSS-properties.

Your code would be as followed:

<div class="wrapper">
    <input type="radio">Button 1
    <input type="radio">Button 2
    <input type="radio">Button 3                  
</div>

.wrapper{
    display:table;
    border:1px solid black;
}

input[type="radio"] {
    display:table-cell;
}