我的 CSS 与 HTML 复选框的兼容性有些问题。对于某些版本的 IE 以及当我将实时 html 放入我的 PowerPoint 时,中心 div 将与左侧重叠并且整个页面向左移动。我不太清楚为什么会这样。
html,
body {
height: 90%;
width: 90%;
padding: 5px;
margin: auto;
}
#googleMap {
height: 90%;
width: 90%;
padding: 5px;
margin: auto;
}
.Title {
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
#left_check {
position: absolute;
left: 10%;
}
#padded-left {
position: absolute;
padding-left: 1.4em;
}
#right_check {
float: right;
}
#mid_check {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#left_align {
display: inline-block;
text-align: left;
}
<ul style="list-style-type:none">
<div id="left_check">
<li>
<form>
<input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
<br>
<div id="padded-left">
<input id="west1" type="checkbox" class="location" value="west_coast">West
<br>
<input id="east1" type="checkbox" class="location" value="central_us">East
<br>
<input id="cent1" type="checkbox" class="location" value="east_coast">Central
</div>
</form>
</li>
</div>
<div id="right_check">
<li>
<form>
<input id="euro1" type="checkbox" class="location" value="europe">Europe
<br>
<input id="africa1" type="checkbox" class="location" value="africa">Africa
<br>
<input id="asia1" type="checkbox" class="location" value="asia">Asia
<br>
<input id="aust1" type="checkbox" class="location" value="australia">Australia
</form>
</li>
</div>
<div id="mid_check">
<div id="left_align">
<li>
<form>
<input id="canada1" type="checkbox" class="location" value="canada">Canada
<br>
<input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
<br>
<input id="south_am1" type="checkbox" class="location" value="south_america">South America
<br>
<input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
</form>
</li>
</div>
</div>
</ul>
最佳答案
如果我答对了你的问题,你可以这样做。
ul {
display: flex;
padding: 0px !important;
}
ul > div {
/* width: 30%; */
flex-grow: 1;
}
ul > div#right_check {
order: 3;
}
ul > div#mid_check {
order: 2;
}
ul > div#left_check {
order: 1;
}
div#mid_check li {
text-align: center;
}
div#right_check li form,
div#mid_check li form {
text-align: left;
}
div#right_check li {
text-align: right;
}
form {
height: 39px;
width: auto;
display: inline-block;
}
#map-canvas {
height: 500px;
width: 100%;
background: #AFAFAF;
}
div.frame {
width: 80%;
margin: auto;
}
<div class='frame'>
<div id="map-canvas"></div>
<ul style="list-style-type:none">
<div id="left_check">
<li>
<form>
<input id="united_states1" type="checkbox" name="location" value="united_states">United States (domestic)
<br>
<div id="padded-left">
<input id="west1" type="checkbox" class="location" value="west_coast">West
<br>
<input id="east1" type="checkbox" class="location" value="central_us">East
<br>
<input id="cent1" type="checkbox" class="location" value="east_coast">Central
</div>
</form>
</li>
</div>
<div id="right_check">
<li>
<form>
<input id="euro1" type="checkbox" class="location" value="europe">Europe
<br>
<input id="africa1" type="checkbox" class="location" value="africa">Africa
<br>
<input id="asia1" type="checkbox" class="location" value="asia">Asia
<br>
<input id="aust1" type="checkbox" class="location" value="australia">Australia
</form>
</li>
</div>
<div id="mid_check">
<div id="left_align">
<li>
<form>
<input id="canada1" type="checkbox" class="location" value="canada">Canada
<br>
<input id="centr_am1" type="checkbox" class="location" value="central_america">Central America
<br>
<input id="south_am1" type="checkbox" class="location" value="south_america">South America
<br>
<input id="ocean1" type="checkbox" class="location" value="oceanic">Oceanic
</form>
</li>
</div>
</div>
</ul>
</div>
关于html - CSS Div 对齐兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31858650/