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

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

2 个答案: