2
我得到了兩個div，每個div都帶有按鈕。該申報單應以最節省空間的方式排列，如圖下方的截圖：使重疊div中的按鈕可點擊
但是，當我這樣做的按鈕「暖」 &「熱」不能再被點擊（因爲在其他分區被覆蓋
什麼是解決這個問題的好辦法
這是我的html：？
<div id="page1">
<div id="formScales">
<div class="formContent" id="noise">
<p>Noise</p>
<input type="button" id="nbtn1" value="Noisy" />
<input type="button" id="nbtn2" value="Medium noisy" />
<input class="active" type="button" id="nbtn3" value="Neutral" />
<input type="button" id="nbtn4" value="Medium silent" />
<input type="button" id="nbtn5" value="Silent" />
</div>
<div class="formContent" id="lighting">
<p>Lighting</p>
<input type="button" id="lbtn1" value="Bright" />
<input type="button" id="lbtn2" value="Medium bright" />
<input class="active" type="button" id="lbtn3" value="Neutral" />
<input type="button" id="lbtn4" value="Medium dark" />
<input type="button" id="lbtn5" value="Dark" />
</div>
<div class="formContent" id="temp">
<p>Temperature</p>
<input type="button" id="tbtn1" value="Cold" temp="test"/>
<input type="button" id="tbtn2" value="Cool" />
<input type="button" id="tbtn3" value="Slightly cool" />
<input class="active" type="button" id="tbtn4" value="Neutral" />
<input type="button" id="tbtn5" value="Slightly warm" />
<input type="button" id="tbtn6" value="Warm" />
<input type="button" id="tbtn7" value="Hot" />
</div>
</div>
<div id="activity">
<p>Activities</p>
<input class="activityBtn" type="button" id="btn16" value="Reading" />
<input class="activityBtn active" type="button" id="btn17" value="On Computer" />
<input class="activityBtn" type="button" id="btn18" value="In Meeting" />
<input class="activityBtn" type="button" id="btn19" value="Moving" />
<input class="activityBtn" type="button" id="btn20" value="Other" />
</div>
<input type="submit" id="submitButton" value="Submit"/>
</div>
而CSS：
body {
padding-top: 4px;
background-color: #ececec;
margin-top: 16px;
margin-left: 0px;
margin-right: 0px;
}
#page1 {
height: 480px;
width: 320px;
display: inline;
}
#formScales {
position: relative;
/* otherwise the float of the child gets it out
of the document flow */
overflow:auto;
}
#activity {
position: relative;
overflow:auto;
margin-top: -77px;
}
#skip {
postion:relative;
overflow: auto;
margin-top: 7px;
}
#noise {
float: left;
width: 31vw;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 7px;
background-color: rgba(255, 204, 204, 0.3);
}
#lighting {
float: left;
width: 31vw;
margin-left: 0px;
margin-right: 5px;
margin-bottom: 7px;
background-color: rgba(255, 255, 153, 0.3);
}
#temp {
float: left;
width: 31vw;
padding-left: 0px;
padding-right: 0px;
margin-bottom: 7px;
background-color: rgba(255, 204, 153, 0.3);
}
p {
font-family: Verdana, arial, sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: center;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.activityBtn {
float: left;
height: 31vw;
width: 31vw;
margin-left: 5px;
}
.active {
background-color: #99CCFF !important;
border: 1px solid #606060;
}
#submitButton {
float: left;
height: 12vw;
width: 300px;
margin-left: 5px;
margin-right: 5px;
background-color: transparent;
background-repeat: no-repeat;
background-position: 20px 10px;
vertical-align: middle;
/*line-height: 160px; background-image: url(icons/photo74.png);*/
background-color: #77DD77;
}
input {
/* webkit-appearance:none to override standard button design! */
-webkit-appearance: none;
color: #3B444B;
width: 100%;
text-decoration: none;
text-align: center;
padding: 8px 12px;
margin-top: 5px;
font-size: 12px;
font-weight: 700;
font-family: helvetica, arial, sans-serif;
border-radius: 2px;
border: 1px solid #606060;
background-color: rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
/* css baseclass */
baseActivityBox,
/* inherit from baseclass */
#btn16,
#btn17,
#btn18,
#btn19,
#btn20 {
background-color: transparent;
background-repeat: no-repeat;
background-position: 20px 10px;
vertical-align: middle;
line-height: 160px;
}
#btn16 {
background-image: url(icons/man216.png);
}
#btn17 {
background-image: url(icons/work12.png);
}
#btn18 {
background-image: url(icons/businessman.png);
clear: left;
}
#btn19 {
background-image: url(icons/business163.png);
}
#btn20 {
background-image: url(icons/other.png);
}
#btn21 {
width: 30vw;
margin-left: 5px;
background-color: #ED2939;
}
#btn22 {
width: 65vw;
background-color: #ED2939;
}
這裏有一個指針，可以幫助http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – NachoDawg
將指針事件設置爲none也會禁用孩子的指針事件。我想，不是OP想要的。 – Thomas
@Thomas不是真的......看看Allison在鏈接問題中的回答 – vals