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

我在下面的链接中有代码。我希望边框只围绕内部内容，而不是拉伸它

尝试了以下操作：

• 用div清除fix
• 溢出：对容器div隐藏

那是行不通的。它应该在IE8和更高版本、Chrome和FF中工作

HTML:

---

你应该做一个包装，包含单选按钮。 然后给出包装器'display:table；'单选按钮的display:table单元格的CSS属性

您的代码如下所示：

HTML

---

这里默认情况下，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;
}

编辑

根据您下面的评论，您确实需要一个包装器来设置内容周围的边框，不管容器的宽度如何。。。因此，将内容包装在一个div中，并将

边框

和

显示：内联

属性设置为此包装，并将容器设置为

文本对齐：居中


HTML:

“不起作用”是什么意思？你想要什么样的结果（最好是一张照片），你现在的结果有什么问题吗？你的意思是这样的吗我想你需要在你的div类
ptr
@Paulie\D yes上有
display:inline
（或者
display:inline block
-两者都试试）。外部div/容器横跨页面的整个宽度，内部div应该像您一样以边框居中did@DavidThomas目前，边框环绕着100%的外部div。我希望内部内容周围有边框，忽略空格，但仍然居中。容器/外部div为100%宽度，内部div应居中。你能更新你的JSFIDLE链接吗？当我把宽度设置为100%时，它就恢复正常了。边界回到了外分区。我已经采用了这种解决方案。但无论如何，谢谢你的更新！：-）
div.ptr {
  border: 1px solid #bbccbb;
}

<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;
}

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;
}

<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>

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;
}