通过offset值的设置使html元素对齐

今天是我第一次写这个随笔，为了记录我发现的一个jquery的offset的值的问题。

这个offset的值会因为页面标签是否处于隐藏状态而表现出不同的值，隐藏状态时，offset的值是相对于直接父亲的，显示状态时，offset的值是相对于整个页面的。

一开始的时候我为了把下拉列表与inputtext左对齐，设置offset值后再改变为显示状态，总也对不齐，总觉得获取的inputtext的offset().left的值很大，后来才发现是相对对象不同导致的，把offset的值在显示后再更改，终于好了。

<s:decorate id="AlarmTypeDec" template="../../layout/edit.xhtml">
<ui:define name="label">
<s:label for="AlarmType">告警类型:</s:label>
</ui:define>
<script>
function showlist(){
$(".text").attr("size", 5);
$(".text").attr("multiple", "multiple");
$(".text").css("height", "auto");
$(".text").css("overflow-y", "scroll");
$(".text").removeClass("hidden");
var aaa = $(".text-show").offset().left;
$(".text").offset({left: aaa});
}
function showvalue(){
var aaa = $(".text").find("option:selected").text();
var bbb = $(".text").val();
$(".text-show").val(aaa);
}
</script>
<h:inputText id="resUrl" required="true" maxlength="128" size="60"
value="请选择" readonly="readonly" styleClass="text-show">
<a:ajax event="click" oncomplete="showlist();"
render="AlarmTypeDec" />
</h:inputText><br/>
<h:selectOneMenu id="AlarmType" required="true" styleClass="text hidden"
value="#{resourceAction.newResource.category.id}">
<f:selectItems value="#{categorySelectList}" />
<a:ajax event="change" execute="@this" render="AlarmTypeDec" oncomplete="showvalue();"/>
</h:selectOneMenu>
</s:decorate>