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

Question

我的代码位于以下链接jsFiddle。我想在内部内容周围使用边框，而不是拉伸它。

尝试以下方法：

• 明确修复div
• 溢出：为容器div隐藏

那不起作用。它应该适用于IE8及更高版本，Chrome和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

默认情况下，Div为display:block个元素。因此，除非另行设置，否则它将始终占用整个宽度。一种方法是将其设置为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/

修改

根据你的评论，你真的需要一个包装器来设置内容的边框，尽管容器的宽度...所以将内容包装在一个div中，并设置border和此包装器的display:inline属性，并将容器设置为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

你应该制作一个包含单选按钮的包装器。 然后给包装'display：table;'和单选按钮'display：table-cell'CSS-properties。

您的代码如下：

HTML 的

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

CSS

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

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

这是jsFiddle