過去幾天我一直有這個問題。我正在嘗試將我的複選框移動到窗口右側的窗格中。但是,每當我使用float:移動它們時,它們也會向下移動大約20-30px,這意味着它們不再適當地與它們的標籤對齊。在浮動狀態下移動的複選框:正確
這裏是對齊與標籤/圖片/複選框,我想所有的窗格代碼:
<div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left'">
<div id="sealDiv" style="padding-top:0px;vertical-align:middle;"><a href="http://google.com"><img src="images/seal.png" alt="countySeal" style="width:150px;height:150px; "/></a></div>
<h3 style="vertical-align:middle;"><u> Live Layers </u></h3>
<div id="layerLabels">
<img src="images/stateParkIcon.png" alt="stateParksIcon" style="height:20px; width:20px"/> <label>State Parks <input id="stateParks" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="stateChanged()"></label>
<br/>
<img src="images/countyParksIcon.png" alt="countyParksIcon" style="height:20px; width:20px;"/> <label>County Parks <input id="countyParks" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="countyChanged()"></label>
<br/>
<img src="images/countyOpenSpaceIcon.png" alt="countyOpenSpaceIcon" style="height:20px; width:20px"/> <label>County Open Spaces <input id="countyOpenSpace" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="countyOpenChanged()"></label>
<br/>
<img src="images/localParksIcon.png" alt="localParksIcon" style="height:20px; width:20px"/> <label>Local Parks <input id="localParks" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="localChanged()"></label>
<br/>
<img src="images/golfCourse.png" alt="imgGolf" style="height:20px; width:20px"/> <label>Golf Courses <input id="golfCourses" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="golfCoursesChanged()"></label>
<br/>
<img src="images/beach.png" alt="imgBeach" style="height:20px; width:20px"/> <label>Beaches <input id="beaches" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="beachesChanged()"></label>
<br/>
<img src="images/iceRink.png" alt="imgIce" style="height:20px; width:20px"/> <label>Ice Rinks <input id="iceRinks" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="iceRinksChanged()"></label>
<br/>
<img src="images/swimming.png" alt="imgSwim" style="height:20px; width:20px"/> <label>Indoor Pools <input id="indoorPools" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="indoorPoolsChanged()"></label>
<br/>
<img src="images/campgrounds.png" alt="imgCamp" style="height:20px; width:20px"/> <label>Campgrounds <input id="campgrounds" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="campgroundsChanged()"></label>
<br/>
<img src="images/boatLaunches.png" alt="imgBoat" style="height:20px; width:20px"/> <label>Boat Launches <input id="boatLaunches" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="boatLaunchesChanged()"></label>
<br/>
<img src="images/marinas.png" alt="imgMarinas" style="height:20px; width:20px"/> <label>Marinas <input id="marinas" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="marinasChanged()"></label>
<br/>
<img src="images/playgrounds.png" alt="imgPlaygronds" style="height:20px; width:20px"/> <label>Playgrounds <input id="playgrounds" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="playgroundsChanged()"></label>
<br/>
<img src="images/bikepath.png" alt="imgBike" style="height:20px; width:20px"/> <label>Bike Paths <input id="bikePaths" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="bikePathsChanged()"></label>
<br/>
<img src="images/boardwalksIcon.png" alt="boardwalkIcon" style="height:20px; width:20px"/> <label>Boardwalks <input id="boardwalks" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="boardwalksChanged()"></label>
<br/>
<img src="images/hikingIcon.png" alt="hikingIcon" style="height:20px; width:20px"/> <label>Hiking Trails <input id="hikingTrails" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="hikingTrailsChanged()"></label>
<br/>
<img src="images/crosswalksIcon.png" alt="crosswalksIcon" style="height:20px; width:20px"/> <label>Crosswalks <input id="crosswalks" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="crosswalksChanged()"></label>
<br/>
<img src="images/sidewalksIcon.png" alt="sidewalkIcon" style="height:20px; width:20px;"/> <label>Sidewalks <input id="sidewalks" class="lyrCB" data-dojo-type="dijit.form.CheckBox" onChange="sidewalksChanged()"></label>
</div>
</div>
是否有一個「速戰速決」這一點,無論是CSS或Javasript還是我創建窗格的方式需要重做才能正常工作?
謝謝!
你能更新您的問題,包括正常的複選框,輸入而不是道場的東西? – 2013-03-21 19:54:48
我不明白爲什麼這很重要?我對這一切都相當陌生,所以如果有某種CSS或JavaScript影響基於dojo或normal的位置(type =「checkbox」),請讓我知道。否則,除了盒子的圖像以及我如何調用函數外,它們都是相同的,但我希望它與這些工作,因爲我出於外觀原因使用dojo複選框CSS。 – griggsbe 2013-03-21 20:14:23