CSS文本与正确问题的对齐

Question

.v-captiontext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    font-weight: bold;
    text-align: right;          
}

我有一个div如下，以上是我在css中为此定义的

<div class="v-captiontext">User ID :</div>

以下是截屏。它仍然只对齐左边但是我想将所有字段对齐，直接指向文本字段。

    <div>
<div
    style="position: relative; overflow: hidden; height: 297px; width: 698px;">
<div style="top: 30px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 267px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 17px;"
    class="v-caption">
<div class="v-captiontext">User ID :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 15px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" disabled="disabled"
    class="v-textfield v-disabled" tabindex="0" type="text"></div>
<div style="top: 60px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 237px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 47px;"
    class="v-caption">
<div class="v-captiontext">First Name :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 45px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"></div>
<div style="top: 90px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 207px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 77px;"
    class="v-caption">
<div class="v-captiontext">Last Name :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 75px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"></div>
<div style="top: 120px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 177px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 107px;"
    class="v-caption">
<div class="v-captiontext">Phone :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 105px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"></div>
<div style="top: 150px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 147px; width: 688px;" class="v-label"></div>
</div>
<div style="position: absolute; left: 10px; top: 137px;"
    class="v-caption">
<div class="v-captiontext">App ID :</div>
<div style="clear: both; width: 0px; height: 0px; overflow: hidden;"></div>
</div>
<div style="top: 135px; left: 110px;" class="v-absolutelayout-wrapper"><input
    style="width: 192px;" class="v-textfield" tabindex="0" type="text"></div>
</div>
</div>

---

我的CSS代码

.v-app-VaadinMainApplication,.v-app-VaadinApplication{
background-color: white;    
}
.top_header{    
    border: 1px solid #e78f08; 
    background: #f6a828 url(common/img/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;    
    height: 30px;
}
.v-caption-top_header .v-captiontext {
 color:white;
 margin-top:23px;
 margin-left:10px;
 font-size: 13px;
}

.intro_key{ 
    border: 1px solid #e78f08; 
    background: #F6F6F6 url("common/img/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
}
.v-caption-intro_key .v-captiontext{

    margin-top:25px;
    margin-left:5px;
    color: #000000; 
    font-weight: bolder;
    font-size: 100%;
    line-height: 200%;
    text-indent: 10px;

}
.v-textfield{
    border: 1px solid #467BB3;  
    background-color: #E8F1FB;
}
.v-app .v-textfield-focus{
    border: 1px solid #467BB3;  
    background-color: #E8F1FB;
}
.v-captiontext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    font-weight: bold;
    text-align: right;          
}

Answer 1

div应该有固定的宽度。 如果他们确实必须将对齐重置为稍后在CSS中。