Question

我正在尝试将以下页面上的复选框与3列对齐。此页面有几个不同的版本，每个版本可能有更多或更少的复选框。这些框在Firefox和其他浏览器中完美对齐，但在IE7中没有。我正在使用的CSS包含在下面。有人可以帮我找出IE7的修复方法吗？我正在使用Drupal的Better Exposed过滤器来生成文本框。

http://www.zambux.com/coupons/services

.bef-select-as-checkboxes .form-item {  
  width: 50%;  
  float: left;  
}

Answer 1

我使用的是FF4，它看起来不对你的页面。

首先，你有＃34; .form-checkboxes＆＃34;如同100px widh，在更宽或更灵活的东西上改变它（否则总是你的元素会很糟糕地包裹）
你不能使用width：50％来对齐3列中的内容，因为你要定义.form.item占用的空间的HALF你想要使用33％，但我建议做30％并添加2％的保证金权利，以保持元素之间的一点差距

我会做类似结构

<div class="container clearfix">
   <label for="input1">
     <input type="text" id="input1" />
     <span>my text</span>
   </label>
   <label for="input2">
     <input type="text" id="input2" />
     <span>my text</span>
   </label>
   <label for="input3">
     <input type="text" id="input3" />
     <span>my text</span>
   </label>
</div>

并添加为CSS

#container label{width:30%; margin-right:2%; float:left;}
.clearfix:after { /*This is for clearing your floating elements*/
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

CSS宽度在IE7中无法正确显示的百分比

1 个答案: