I have the code at the following link jsFiddle . I want border just around the inner content, instead of stretching it.
Tried the following:
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"> </div>
</div>
CSS:
div.ptr {
border: 1px solid #bbccbb;
}
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"> </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;
}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.