Question

我遇到与Weird issue with Chrome inspect element类似的问题。当我加载页面时，字段未对齐，显示低于应该的值。但是，如果我点击进行检查，“重复”字段不对齐就会消失，字段会与“收件人”对齐。这只发生在Chrome（第15版）上，这不是Firefox，Safari，IE的问题。 / p>

图片：http://cl.ly/0P2b2W1C3H123e1z3p1q

<div class="date-time">
<ul class="select-index">
<li>
<div>   
<label style="width: 100%;">Schedule Type</label><br/>
<select class="large-select" id="schedule_time_scheme" name="schedule[time_scheme]">    
<option value="Custom" selected="selected">Custom</option>
<option value="Alternate_Weekends">Alternate weekends</option>
</div>
</li>
<li>
<div id="repeat_schedule_div" style="margin: 20px 0px;">
<label>Repeat</label><br/>
<select class="large-select" name="from" id="repeat_select">
<option value="1">Every one Week</option>
</select>
</div>  
</li>
</ul>

CSS：

.schedule-container .date-time { 
display: inline;
float: left;
width: 280px;
}

ul { 
display: block;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 1em;
margin-top: 1em;
padding-left: 40px;
}

ul.select-index { 
float: left;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 100%;
}

ul.select-index li { 
float: left;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
width: auto;
}

.new #content .schedule-container .date-time label { 
color: rgb(51, 51, 51);
float: left;
font-size: 13px;
margin-bottom: 2px;
width: 100%;
}

帮助！

Answer 1

而不是使用<br /> - s尝试始终使用CSS进行对齐，例如为标签设置margin-top - label { display: block; margin-top: 15px }

另外，查看标记和CSS以解决您的问题会很有帮助

Chrome上未对齐字段的问题在Inspect上消失

1 个答案: