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

发布于 2024-10-27 10:12:27 字数 393 浏览 1 评论 0原文

我正在尝试将下一页上的复选框对齐为 3 列。此页面有多个不同版本，每个版本可能有或多或少的复选框。这些框在 Firefox 和其他浏览器中完美对齐，但在 IE7 中则不然。我正在使用的 CSS 包含在下面。有人可以帮我解决 IE7 的问题吗？我正在使用 Drupal 的 Better Exposed Filters 来生成文本框。

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

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

原文

I am trying to align my checkboxes on the following page into 3 columns. There are several different versions of this page and each one may have more or less checkboxes. The boxes align perfectly in Firefox and other browsers, but not in IE7. The CSS I am using is included below. Can someone help me figure out a fix for IE7? I am using the Better Exposed Filters for Drupal to produce the text boxes.

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

路还长，别太狂 2024-11-03 10:12:27

我正在使用 FF4，但它看起来与您的页面不符。

首先，您将“.form-checkboxes”设置为 100px 宽度，将其更改为更宽或更灵活的内容（否则您的元素总是会包裹得很糟糕）
您无法使用 width:50% 将内容对齐 3 列，因为您正在定义一半的空间被 .form.item 占用，您想使用 33% ，但我建议使用 30% 并添加 2% 的 margin-right 以在元素之间保留一点间隙

我会做类似的事情作为结构

<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%;
}

I am using FF4 and it doesn't look right your page.

First of all you have ".form-checkboxes" as 100px widh, change that on something wider or more flexible (otherwise always your elements will wrap badly)
You cannot align things in 3 columns by using width:50% , because you are defining HALF of the space to be occupied by .form.item you would like to use 33% , but I suggest to do 30% and add 2% margin-right to keep a little bit of gap between the elements

I would do something like that as structure

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

and add as 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%;
}

回复收藏 0 原文

~没有更多了~