让div儿童分享父母的宽度 [英] Make div children share the parents width
本文介绍了让div儿童分享父母的宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
现在我想要按钮来填充父项的整个宽度 - 但分享它。
也就是说,如果有一个子按钮,它应该填充100% - 如果有2个,它们的宽度应该是每个尺寸的50%。
编辑:按照要求 - 这里是代码(尽管我认为上面的解释更好):
.buttons
{
background:#f1f1f1;
border-top:1px solid #ddd;
padding:15px;
height:34px;
}
.submitbutton
{
width:inherit;
背景:#C2E5FC; / *旧浏览器* /
背景:-moz-linear-gradient(顶部,#C2E5FC 0%,#008BE8 100%); / * FF3.6 + * /
背景:-webkit渐变(线性,左上,左下,色阻(0%,#C2E5FC),色阻(100%,#008BE8)); / * Chrome,Safari4 + * /
背景:-webkit-linear-gradient(顶部,#C2E5FC 0%,#008BE8 100%); / * Chrome10 +,Safari5.1 + * /
背景:-o-linear-gradient(顶部,#C2E5FC 0%,#008BE8 100%); / * Opera11.10 + * /
background:-ms-linear-gradient(top,#C2E5FC 0%,#008BE8 100%); / * IE10 + * /
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr ='#C2E5FC',endColorstr ='#008BE8',GradientType = 0); / * IE6-9 * /
背景:线性渐变(顶部,#C2E5FC 0%,#008BE8 100%); / * W3C * /
border:1px solid#008BE8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
line-height:20px;
font-size:16px;
padding:6px 12px;
颜色:#fff;
text-shadow:-1px -1px#008BE8;
margin-left:10px;
光标:指针;
}
html:
< div class =buttons>
< input class =submitbuttontype =submitvalue =Register>
< input class =submitbuttontype =submitvalue =取消>
< / div>
解决方案
:
.buttons> li {
display:table-cell!important;
宽度:1%!重要;
float:none!important;
}
.buttons> li> * {
width:100%
}
请参阅 jsfiddle
Basically I got a div parent that consists of 1+ div child elements (with a button within each one). Now I'd like the buttons to fill the entire width of the parent - but share it. That is, if there's one child button it should fill 100% - if there are 2 they should have a width of 50% of the size each etc.
How can I do this?
Edit: As requested - here's the code (although I think the above explanation is better):
.buttons
{
background: #f1f1f1;
border-top: 1px solid #ddd;
padding: 15px;
height: 34px;
}
.submitbutton
{
width: inherit;
background: #C2E5FC; /* Old browsers */
background: -moz-linear-gradient(top, #C2E5FC 0%, #008BE8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C2E5FC), color-stop(100%,#008BE8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C2E5FC 0%,#008BE8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C2E5FC 0%,#008BE8 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #C2E5FC 0%,#008BE8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C2E5FC', endColorstr='#008BE8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #C2E5FC 0%,#008BE8 100%); /* W3C */
border: 1px solid #008BE8;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
line-height: 20px;
font-size: 16px;
padding: 6px 12px;
color: #fff;
text-shadow: -1px -1px #008BE8;
margin-left: 10px;
cursor: pointer;
}
The html:
<div class="buttons">
<input class="submitbutton" type="submit" value="Register">
<input class="submitbutton" type="submit" value="Cancel">
</div>
解决方案
You can enclose them inside a li and use this css:
.buttons > li {
display: table-cell !important;
width: 1% !important;
float: none !important;
}
.buttons > li >* {
width:100%
}
See jsfiddle
这篇关于让div儿童分享父母的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文