在IE7中,浮动的div不会并排放置

时间:2012-12-28 12:06:16

标签: internet-explorer-7

这是我的小提琴: http://jsfiddle.net/arDtd/

它在除IE7之外的每个浏览器中找到,其中标签不与其他内容并排放置而是位于上方。

<div class="room_row">

    <div id="roomopts_2" class="jsHide"><fieldset class="form-wrapper" id="edit-room-options-2"><legend><span class="fieldset-legend">Room 2</span></legend><div class="fieldset-wrapper"><div class="hrCompact"><hr /></div><div class="form-item form-type-select form-item-adults-2">
  <label for="edit-adults-2">Adults </label>
 <select id="edit-adults-2" name="adults_2" class="form-select"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option></select>
</div>
<div class="form-item form-type-select form-item-children-2">
  <label for="edit-children-2">Children </label>
 <select id="edit-children-2" name="children_2" class="form-select"><option value="0" selected="selected">0</option><option value="1">1</option><option value="2">2</option></select>
</div>
</div></fieldset>
</div>    </div>



div {
display: inline;
}    
.room_row {
width: 100%;
float: left;
}
.room_row fieldset.form-wrapper {
float: right;
width: 200px;
}
.form-wrapper {
display: block !important;
}
fieldset {
margin-bottom: 20px;
}
.room_row legend {
float: left;
clear: none;
}
.room_row .fieldset-wrapper {
float: left;
}
.fieldset-wrapper {
display: block;
}
hr {
display: none;
}
.room_row label {
display: none;
}

​

1 个答案:

答案 0 :(得分:0)

您必须使用ie7 css hack(如果您被允许)才能满足您的要求

.fieldset-wrapper {
   display: block;
   *margin-left: 70px;
   *margin-top: -20px;
}

这是最终的demo

希望这很有用。