CSS Div 对齐兼容性

Question

我的 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>

原版CSS（某些电脑 IE 有问题）

有弹性

IE 问题（新）

Answer 1

如果我答对了你的问题，你可以这样做。

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>

这是你想得到的吗？

CSS Div 对齐兼容性

CSS Div Alignment Compatibility

html

css

center

css-float