我有父DIV wrap
和3个主要子DIV。inputQ
,inputQL
,inputQR
。我使用wrap
的背景颜色,但这种颜色没有出现在inputQL
,inputQR
。由于inputQL,inputQR是内部包装,我相信它的背景颜色应该添加到孩子一个。我是这方面的初学者,你能告诉我这里有什么问题吗?如何为inputQL,inputQR添加相同的背景颜色?
小提琴:https://jsfiddle.net/anoopcr/hfmghkp0/
<div class="wrap">
<div class="inputQ">
<div class="InputQuest">Text Middle</div>
<div><input id="amnttext" class="textbox"></input></div>
</div>
<div class="inputQL">
<div class="InputQuest">Text Left</div>
<div><input id="loandtext" class="textbox"></input></div>
</div>
<div class="inputQR">
<div class="InputQuest">Text Right</div>
<div><input id="emidtext" class="textbox"></input></div>
</div>
</div>
CSS:
.wrap {
width: 80%;
margin-top: 80px;
margin: auto;
padding: 10px;
background:#eee;
}
.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }
.InputQuest
{
width:50%;
float:left;
font-family: arial;
font-size:18px;
text-align:center;
line-height: 30px;
margin:auto;
}
.textbox
{
float:left;
margin:auto;
font-size:16px;
font-family: verdana;
padding:5px;
border:1px solid #ccc;
border-radius:4px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
width:30%;
}
答案 0 :(得分:2)
你还需要一个单元格.wrap {overflow:hidden; } 试试这个
.wrap {
width: 80%;
margin-top: 80px;
margin: auto;
padding: 10px;
background:#eee;
overflow: hidden;
}
.inputQ{width:60%;margin: auto; padding:10px;height:50px;margin-top:50px; }
.inputQL{width:45%;margin: auto; height:50px;margin-top:50px;float:left;}
.inputQR{width:45%;margin: auto; height:50px;margin-top:50px;float:right; }
.InputQuest
{
width:50%;
float:left;
font-family: arial;
font-size:18px;
text-align:center;
line-height: 30px;
margin:auto;
}
.textbox
{
float:left;
margin:auto;
font-size:16px;
font-family: verdana;
padding:5px;
border:1px solid #ccc;
border-radius:4px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
width:30%;
}
<div class="wrap">
<div class="inputQ">
<div class="InputQuest">Text Middle</div>
<div><input id="amnttext" class="textbox"></input></div>
</div>
<div class="inputQL">
<div class="InputQuest">Text Left</div>
<div><input id="loandtext" class="textbox"></input></div>
</div>
<div class="inputQR">
<div class="InputQuest">Text Right</div>
<div><input id="emidtext" class="textbox"></input></div>
</div>
</div>