CSS Div 对齐兼容性

Posted 2023-03-29

【中文标题】CSS Div 对齐兼容性

【英文标题】：CSS Div Alignment Compatibility

【发布时间】：2015-10-29 18:32:03

【问题描述】：

我的 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（某些 pc IE 的问题）

使用弹性

IE 问题（新）

【参考方案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 显示方式的看法。如果我使用 flex 和 30% 宽度，即使 html 正文应该只有 90%

，复选框似乎都在页面的左侧

为了澄清一点，我想让左 div 向左浮动，右 div 向右浮动，中间在两者之间居中并左对齐。

如何将 width: 30% 改为, flex-grow: 1？

在我的屏幕上，这个答案和之前的一样。你的不一样吗？另外，感谢您的帮助！

您使用哪种浏览器？